JavaScript – 对话框

介绍

对话框是 Web 开发中常用的一个功能，可以弹出提示框、确认框和提示输入框，与用户进行交互，获取到用户的选择和输入。JavaScript 提供了一些方法和事件，让我们可以很方便地实现这些对话框。

提示框

提示框就是一个简单的弹窗，只包含一段文字和一个“确定”按钮。使用 alert() 方法可以直接弹出一个提示框，示例代码如下：

alert('Hello World');

此时会弹出一个提示框，包含文本“Hello World”和一个“确定”按钮。提示框是阻塞式的，也就是说，直到用户点击了确定按钮，代码才会继续执行。

确认框

确认框和提示框类似，不同之处在于除了一段文字和一个“确定”按钮外，还有一个“取消”按钮。使用 confirm() 方法可以弹出一个确认框，示例代码如下：

if (confirm('Are you sure?')) {
    console.log('User clicked OK');
} else {
    console.log('User clicked Cancel');
}

此时会弹出一个确认框，包含文本“Are you sure?”、“确定”按钮和“取消”按钮。当用户点击“确定”按钮时，代码会打印出“User clicked OK”，否则会打印出“User clicked Cancel”。确认框同样是阻塞式的。

提示输入框

提示输入框是一个可以让用户输入文本的弹窗，使用 prompt() 方法可以弹出一个提示输入框，示例代码如下：

const name = prompt('Please enter your name:');
if (name) {
    console.log('Hello, ' + name);
} else {
    console.log('User cancelled the prompt.');
}

此时会弹出一个提示输入框，包含文本“Please enter your name:”和一个“确定”按钮和一个“取消”按钮。当用户点击“确定”按钮并输入了文本时，代码会打印出“Hello, ”加上用户输入的文本；否则会打印出“User cancelled the prompt.”。提示输入框同样也是阻塞式的。

自定义对话框

以上三种对话框都是浏览器自带的，包含着固定的样式和功能。如果我们想实现一个自定义的对话框，该怎么办呢？其实利用 HTML 和 CSS，我们就可以创建一个自定义的对话框。示例代码如下：

<!--HTML 代码-->
<div class="modal">
  <div class="modal-content">
    <span class="close">×</span>
    <p>Hello World!</p>
  </div>
</div>

/* CSS 代码 */
.modal {
  display: none; 
  position: fixed; 
  z-index: 1; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.4); 
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto; 
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

然后利用 JavaScript 实现对话框的弹出和关闭，示例代码如下：

// 获取对话框元素
const modal = document.querySelector('.modal');
const modalContent = document.querySelector('.modal-content');

// 获取弹出对话框的按钮元素
const btn = document.querySelector('button');

// 获取关闭对话框的 <span> 元素
constcloseBtn = document.querySelector('.close');

// 点击按钮打开对话框
btn.onclick = function() {
  modal.style.display = 'block';
};

// 点击 <span>（×），关闭对话框
closeBtn.onclick = function() {
  modal.style.display = 'none';
};

// 当用户点击模态框之外的区域，关闭对话框
window.onclick = function(event) {
  if (event.target === modal) {
    modal.style.display = 'none';
  }
};

这个代码实现了点击一个按钮弹出该自定义对话框，点击关闭按钮或者模态框之外的区域关闭对话框。其中利用了 CSS 控制对话框的样式和布局，利用了 JavaScript 控制对话框的弹出和关闭。

总结

JavaScript 中的对话框是很实用的一个功能，可以通过提示框、确认框和提示输入框来获取用户的选择和输入。对于一些需要自定义样式和功能的对话框，我们可以利用 HTML 和 CSS 来实现，然后利用 JavaScript 控制其弹出和关闭。在实际开发中，我们应该根据实际需求来选择使用哪种对话框，并遵循良好的设计和用户体验的原则来实现对话框功能。