JavaScript写的一个自定义弹出式对话框代码

以下是详细讲解 JavaScript 写一个自定义弹出式对话框的完整攻略。

一、简介

弹出式对话框是 Web 开发中常用的组件之一，可用于实现用户输入信息的提示、确认或错误等功能。JavaScript 可以实现一个自定义的弹出式对话框，方便开发者在应用中使用。

二、实现步骤

1. 创建 HTML 结构

首先在 HTML 中创建一个用于弹出式对话框的容器。以下示例使用一个 id 为 dialog 的 div 元素作为容器：

<div id="dialog"></div>

1. 编写 CSS 样式

接着需要编写 CSS 样式，来设置对话框的样式和布局。以下是一个简单的 CSS 样式示例：

#dialog {
  position: absolute;
  z-index: 9999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  padding: 20px;
  display: none;
}

#dialog h3 {
  margin-top: 0;
}

#dialog button {
  margin-top: 20px;
  float: right;
}

1. 编写 JavaScript 代码

接着需要编写 JavaScript 代码，来实现对话框的弹出和关闭。以下是一个实现弹出对话框的 JavaScript 代码示例：

function showDialog(title, message) {
  // 获取对话框元素并设置标题和消息
  var dialog = document.querySelector('#dialog');
  dialog.querySelector('h3').innerHTML = title;
  dialog.querySelector('p').innerHTML = message;

  // 显示对话框
  dialog.style.display = 'block';
}

以上代码中，showDialog 函数接受两个参数：对话框的标题和消息内容。函数首先通过 querySelector 方法获取对话框元素，然后设置标题和消息内容，并将对话框的 display 样式属性设置为 block，以显示对话框。

以下是一个实现关闭对话框的 JavaScript 代码示例：

function hideDialog() {
  // 获取对话框元素并隐藏
  var dialog = document.querySelector('#dialog');
  dialog.style.display = 'none';
}

以上代码中，hideDialog 函数首先获取对话框元素，然后将对话框的 display 样式属性设置为 none，以隐藏对话框。

三、示例说明

以下是两个基于以上代码的示例：

确认对话框示例

下面是一个基于以上代码实现的确认对话框示例，可以让用户确认某一操作。

<button onclick="showConfirmDialog()">删除</button>

<div id="dialog">
  <h3>确认删除</h3>
  <p>你确定要删除这条记录吗？</p>
  <button onclick="deleteRecord()">确定</button>
  <button onclick="hideDialog()">取消</button>
</div>

<script>
  function showConfirmDialog() {
    var dialog = document.querySelector('#dialog');
    dialog.querySelector('button').style.display = 'block';
    showDialog('确认删除', '你确定要删除这条记录吗？');
  }

  function deleteRecord() {
    // 执行删除操作，并关闭对话框
    // ...
    hideDialog();
  }
</script>

以上代码中，showConfirmDialog 函数显示一个确认对话框，询问用户是否确定删除，点击"确定"按钮触发deleteRecord函数删除指定记录，点击"取消"按钮则关闭对话框。

提示框示例

以下是一个基于以上代码实现的提示框示例，可以提示用户某一信息。

<button onclick="showAlertDialog()">查看消息</button>

<div id="dialog">
  <h3>提示</h3>
  <p></p>
  <button onclick="hideDialog()">关闭</button>
</div>

<script>
  function showAlertDialog() {
    var dialog = document.querySelector('#dialog');
    dialog.querySelector('button').style.display = 'none';
    showDialog('提示', '你已收到一条新的消息。');
  }
</script>

以上代码中，showAlertDialog 函数显示一个提示框，显示收到了一条新消息，点击"关闭"按钮则关闭对话框。

四、总结

以上就是 JavaScript 写一个自定义弹出式对话框的完整攻略。我们可以通过 HTML，CSS 和 JavaScript 分别实现对话框的结构、样式和功能，并可以根据不同的需求实现不同类型的对话框。