JavaScript – 對話框

對話框是 Web 開發中常用的一個功能，可以彈出提示框、確認框和提示輸入框，與用戶進行交互，獲取到用戶的選擇和輸入。愛掏網 - it200.comJavaScript 提供了一些方法和事件，讓我們可以很方便地實現這些對話框。愛掏網 - it200.com

提示框

提示框就是一個簡單的彈窗，只包含一段文字和一個“確定”按鈕。愛掏網 - it200.com使用 alert() 方法可以直接彈出一個提示框，示例代碼如下：

alert('Hello World');

此時會彈出一個提示框，包含文本“Hello World”和一個“確定”按鈕。愛掏網 - it200.com提示框是阻塞式的，也就是說，直到用戶點擊了確定按鈕，代碼才會繼續執行。愛掏網 - it200.com

確認框

確認框和提示框類似，不同之處在于除了一段文字和一個“確定”按鈕外，還有一個“取消”按鈕。愛掏網 - it200.com使用 confirm() 方法可以彈出一個確認框，示例代碼如下：

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

此時會彈出一個確認框，包含文本“Are you sure?”、“確定”按鈕和“取消”按鈕。愛掏網 - it200.com當用戶點擊“確定”按鈕時，代碼會打印出“User clicked OK”，否則會打印出“User clicked Cancel”。愛掏網 - it200.com確認框同樣是阻塞式的。愛掏網 - it200.com

提示輸入框

提示輸入框是一個可以讓用戶輸入文本的彈窗，使用 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:”和一個“確定”按鈕和一個“取消”按鈕。愛掏網 - it200.com當用戶點擊“確定”按鈕并輸入了文本時，代碼會打印出“Hello, ”加上用戶輸入的文本；否則會打印出“User cancelled the prompt.”。愛掏網 - it200.com提示輸入框同樣也是阻塞式的。愛掏網 - it200.com

自定義對話框

以上三種對話框都是瀏覽器自帶的，包含著固定的樣式和功能。愛掏網 - it200.com如果我們想實現一個自定義的對話框，該怎么辦呢？其實利用 HTML 和 CSS，我們就可以創建一個自定義的對話框。愛掏網 - it200.com示例代碼如下：

<!--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';
  }
};

這個代碼實現了點擊一個按鈕彈出該自定義對話框，點擊關閉按鈕或者模態框之外的區域關閉對話框。愛掏網 - it200.com其中利用了 CSS 控制對話框的樣式和布局，利用了 JavaScript 控制對話框的彈出和關閉。愛掏網 - it200.com

總結

JavaScript 中的對話框是很實用的一個功能，可以通過提示框、確認框和提示輸入框來獲取用戶的選擇和輸入。愛掏網 - it200.com對于一些需要自定義樣式和功能的對話框，我們可以利用 HTML 和 CSS 來實現，然后利用 JavaScript 控制其彈出和關閉。愛掏網 - it200.com在實際開發中，我們應該根據實際需求來選擇使用哪種對話框，并遵循良好的設計和用戶體驗的原則來實現對話框功能。愛掏網 - it200.com