怎么用js写一个弹框

用JavaScript写一个弹框的方法有多种，包括使用内置的 alert 方法、创建自定义的模态框等。 在这篇文章中，我们将从基础到高级，详细介绍如何用JavaScript实现不同类型的弹框。首先，我们会介绍最简单的 alert 方法，然后逐步深入，展示如何创建更复杂和自定义的模态框。

一、基础弹框：使用 `alert` 方法

JavaScript 提供了一个非常简单的内置方法 alert 来显示弹框。这个方法会暂停浏览器的执行，直到用户关闭弹框。

alert("这是一个简单的弹框！");

优点：

简单易用：只需要一行代码即可实现。
跨浏览器支持：几乎所有浏览器都支持 alert 方法。

缺点：

不可自定义：样式和行为固定，无法改变。
阻塞页面：会暂停所有的JavaScript执行，直到用户关闭弹框。

二、自定义弹框：使用 `confirm` 和 `prompt` 方法

除了 alert 方法，JavaScript 还提供了 confirm 和 prompt 方法，用于更复杂的交互。

使用 `confirm` 方法

confirm 方法显示一个带有“确定”和“取消”按钮的弹框，并返回用户的选择。

let userConfirmed = confirm("你确定要继续吗？");
if (userConfirmed) {
    console.log("用户选择了确定");
} else {
    console.log("用户选择了取消");
}

使用 `prompt` 方法

prompt 方法显示一个带有输入框的弹框，并返回用户的输入。

let userInput = prompt("请输入你的名字：", "默认值");
if (userInput !== null) {
    console.log("用户输入了：" + userInput);
} else {
    console.log("用户取消了输入");
}

三、创建自定义模态框

对于更复杂的需求，你可能需要一个完全自定义的模态框。以下是一个简单的自定义模态框的实现。

HTML 结构

<div id="customModal" class="modal">
  <div class="modal-content">
    <span class="close-button">&times;</span>
    <p>这是一个自定义模态框！</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-button {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close-button:hover,
.close-button:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

JavaScript 功能

document.addEventListener("DOMContentLoaded", function() {
    var modal = document.getElementById("customModal");
    var closeButton = document.getElementsByClassName("close-button")[0];
    function openModal() {
        modal.style.display = "block";
    }
    function closeModal() {
        modal.style.display = "none";
    }
    closeButton.addEventListener("click", closeModal);
    window.addEventListener("click", function(event) {
        if (event.target == modal) {
            closeModal();
        }
    });
    // 示例：打开模态框
    openModal();
});

四、高级自定义模态框

为了实现更高级的功能，我们可以使用JavaScript库，例如Bootstrap和jQuery UI，或者完全自定义实现。

使用 Bootstrap 实现模态框

Bootstrap 提供了一个非常易用的模态框组件。首先，确保你已经引入了 Bootstrap 的 CSS 和 JS 文件。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

然后，创建一个模态框的 HTML 结构：

<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">模态框标题</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        这是模态框的主体内容。
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

最后，通过JavaScript控制模态框的打开和关闭：

$(document).ready(function(){
  $("#myModal").modal('show');
});

五、使用JavaScript库实现弹框

除了Bootstrap，还可以使用其他JavaScript库来实现更复杂的弹框功能。例如，SweetAlert和Swal是两个非常流行的库。

使用 SweetAlert

首先，确保引入了SweetAlert的库：

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

然后，通过以下代码显示一个弹框：

swal("Good job!", "You clicked the button!", "success");

六、总结

通过以上方法，你可以在JavaScript中实现从简单到复杂的各种类型的弹框。使用内置方法 alert、confirm 和 prompt 可以快速实现基础功能，而自定义模态框和使用第三方库则可以满足更复杂的需求。无论你选择哪种方式，都可以根据具体的项目需求进行选择和实现。