详解JavaScript实现JS弹窗的三种方式

前言

在网页开发中，经常会用到弹窗这个功能。弹窗可以用来展示一些重要信息、提醒用户进行操作，甚至用来进行登录等相关操作。本文将详细介绍 JavaScript 实现三种 JS 弹窗的方式。

方式一：原生 JavaScript 实现

原生 JavaScript 实现弹窗的方式主要使用 window.alert()、window.confirm() 和 window.prompt() 这三个方法实现。

1. `window.alert()`

window.alert("这是一个 alert 弹窗");

以上代码可以创建一个带有 OK 按钮的弹窗，点击 OK 按钮后弹窗会自动关闭。window.alert() 方法可以用于提醒用户一些信息。

2. `window.confirm()`

if(window.confirm("你确定要删除这个文件吗？")){
    // 用户点击确定按钮
} else {
    // 用户点击取消按钮
}

以上代码可以创建一个带有确定和取消按钮的弹窗，如果用户点击确定按钮，程序的执行会跳转到 if 语句的代码块中，否则跳转到 else 语句的代码块中。

3. `window.prompt()`

var userName = window.prompt("请输入您的名字：");
if (userName != null){
    document.write("你好，" + userName + "!");
}

以上代码可以创建一个带有输入框、确定和取消按钮的弹窗。当用户点击确定按钮时，弹窗会返回输入框中的内容。

方式二：使用第三方插件

除了原生 JavaScript 实现外，还可以使用一些第三方插件实现弹窗的效果。其中比较常见的插件有 jQuery UI、SweetAlert、layer 等。

1. jQuery UI

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery UI 弹窗</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.12.4.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>

<div id="dialog" title="Basic dialog">
  <p>This is an example of a basic modal dialog.</p>
</div>

<script>
$( "#dialog" ).dialog();
</script>

</body>
</html>

使用 jQuery UI 实现弹窗需要引入 jQuery 和 jQuery UI 的库文件，并在代码中指定弹窗的标题、内容等相关参数。

2. SweetAlert

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>SweetAlert 弹窗实例</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10.8.0/dist/sweetalert2.min.css">
</head>
<body>

  <button onclick="showAlert()">SweetAlert 弹窗</button>

  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.8.0/dist/sweetalert2.min.js"></script>
  <script>
    function showAlert() {
      Swal.fire({
        title: '警告',
        text: '你确认要删除这条数据吗？',
        icon: 'warning',
        showCancelButton: true,
        cancelButtonText: "取消",
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: '确定'
      }).then((result) => {
        if (result.isConfirmed) {
          Swal.fire(
            '已删除!',
            '你的数据已被删除。',
            'success'
          )
        }
      })
    }
  </script>

</body>
</html>

使用 SweetAlert 实现弹窗需要引入 SweetAlert 的库文件，并在代码中指定弹窗的标题、内容、图标等相关参数。与 jQuery UI 不同，SweetAlert 的弹窗样式更为美观。

方式三：使用 CSS 实现

除了 JavaScript 和第三方插件实现弹窗外，还可以使用 CSS 和 HTML 实现弹窗的效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 实现弹窗</title>
<style type="text/css">
    .dialog_box{
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: 0px 0px 5px #ccc;
        width: 300px;
        height: 200px;
        position: absolute;
        left: 0; right: 0; top: 0; bottom: 0;
        margin: auto;
        padding: 10px;
        text-align: center;
    }
    .mask{
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 100;
        display: none;
    }
    .dialog_box h1{
        font-size: 20px;
        margin-top: 20px;
    }
    .dialog_box button{
        width: 60px;
        margin-top: 30px;
        height: 30px;
    }
</style>
</head>
<body>

<div class="mask"></div>

<div class="dialog_box">
    <h1>欢迎使用弹窗</h1>
    <button onclick="hideDialog()">关闭</button>
</div>

<script>
    function showDialog(){
        document.querySelector('.mask').style.display='block';
        document.querySelector('.dialog_box').style.display='block';
    }
    function hideDialog(){
        document.querySelector('.mask').style.display='none';
        document.querySelector('.dialog_box').style.display='none';
    }
</script>

<button onclick="showDialog()">CSS 弹窗</button>

</body>
</html>

使用 CSS 实现弹窗需要先定义弹窗的样式，再使用 JavaScript 控制弹窗的显示和隐藏。