JavaScript彈窗功能常見幾種方法總結(jié)

更新時間：2025年05月07日 10:13:57 作者：dddddza_

這篇文章主要給大家介紹了關于JavaScript彈窗功能常見幾種方法的相關資料,分別使用alert()、confirm()和prompt(),并提供了使用自定義HTML、CSS和JavaScript創(chuàng)建模態(tài)彈窗的示例,需要的朋友可以參考下

1. 使用 alert()

alert() 方法用于顯示一個帶有消息和一個“確定”按鈕的對話框。

alert("這是一個警告彈窗！");

2. 使用 confirm()

confirm() 方法用于顯示一個帶有消息以及“確定”和“取消”按鈕的對話框。如果用戶點擊“確定”，則返回 true；如果點擊“取消”，則返回 false。

let userConfirmed = confirm("你確定要繼續(xù)嗎？");
if (userConfirmed) {
    console.log("用戶點擊了確定");
} else {
    console.log("用戶點擊了取消");
}

3. 使用 prompt()

prompt() 方法用于顯示一個可提示用戶輸入的對話框。對話框包含一個文本輸入框、一個“確定”按鈕和一個“取消”按鈕。如果用戶點擊“確定”，則返回輸入框中的值；如果點擊“取消”，則返回 null。

let userInput = prompt("請輸入你的名字：");
if (userInput !== null) {
    console.log("用戶輸入了：" + userInput);
} else {
    console.log("用戶取消了輸入");
}

4. 使用自定義 HTML 和 CSS 創(chuàng)建模態(tài)彈窗

有時候，內(nèi)置的彈窗功能可能不夠靈活或美觀。你可以使用 HTML、CSS 和 JavaScript 來創(chuàng)建自定義的模態(tài)彈窗。

HTML:

<!-- 模態(tài)彈窗的結(jié)構(gòu) -->
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>這是一個自定義的模態(tài)彈窗。</p>
  </div>
</div>

<!-- 觸發(fā)彈窗的按鈕 -->
<button id="openModalBtn">打開彈窗</button>

CSS:

/* 模態(tài)彈窗的樣式 */
.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:

// 獲取模態(tài)彈窗
var modal = document.getElementById("myModal");

// 獲取打開彈窗的按鈕
var btn = document.getElementById("openModalBtn");

// 獲取 <span> 元素，用于關閉模態(tài)彈窗
var span = document.getElementsByClassName("close")[0];

// 當用戶點擊按鈕時，打開模態(tài)彈窗
btn.onclick = function() {
  modal.style.display = "block";
}

// 當用戶點擊 <span> (x)，關閉模態(tài)彈窗
span.onclick = function() {
  modal.style.display = "none";
}

// 當用戶點擊模態(tài)彈窗外部區(qū)域時，關閉模態(tài)彈窗
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

這個自定義的模態(tài)彈窗提供了更多的靈活性和控制，你可以根據(jù)需要調(diào)整樣式和功能。