如何使用 CSS 和 JavaScript 创建模态对话框-之路教程

←如何使用 JavaScript 创建对话框

如何从 HTML 字符串创建一个新的 DOM 元素→

如何使用 CSS 和 JavaScript 创建模态对话框

如今，编程世界中令人兴奋的事情之一是模态对话框。
模态对话框或者弹出框用于显示上次更新的网页。
它将用户的注意力吸引到特定元素上。

模态对话框最显着的优点是它显示添加的信息而不是再次加载页面。
它为用户提供了相关信息到类似网页上的对话框中。

建议模态对话框的另一个优点是它们减少了吸引用户的加载时间。

现在我们了解了什么是模态对话框，让我们看看如何创建它们。

有多种方法可以使用 HTML、CSS 和 JavaScript 创建模态对话框。

让我们开始一步一步地创建我们的代码吧！

3. 添加 JavaScript。

最后一步是在我们的代码中添加 JavaScript。

我们可以在文档的 <head> 或者外部 .js 文件中添加该函数。

function example() {
el = document.getElementById("example");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

如果隐藏，我们使用自动切换方法使其可见。

我们应该在我们的页面上添加以下内容，这样当用户点击链接时，我们的框就会显示出来。

<a href='#' onclick=example()'>open</a>

在 HTML 中，我们应该添加一个链接来隐藏它：

<a href='#' onclick=example()'>Click here to close the box</a>

这是我们代码的结果：

例子

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      body {
        height: 100%;
        margin: 0;
        padding: 0;
        font-family: Arial, Helvetica, sans-serif;
      }
      h2 {
        font-size: 20px;
        color: #000000;
      }
      #example {
        visibility: hidden;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        z-index: 1000;
      }
      #example div {
        width: 350px;
        height: 80px;
        margin: 100px auto;
        background-color: #f2f2f2;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border: 1px solid #666666;
        padding: 15px;
        text-align: center;
        font-weight: bold;
        font-size: 15px;
        border: 3px solid #cccccc;
        position: absolute;
        left: 50%;
        top: 100px;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <h2>Create Modal Box</h2>
    <a href='#' onclick='example()'>open</a>
    <div id="example">
      <div>
        <p>对话框内容</p>
        <a href='#' onclick='example()'>关闭窗口</a>
      </div>
      <script>
        function example() {
          el = document.getElementById("example");
          el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
        }
      </script>
    </div>
  </body>
</html>

让我们看另一个模态对话框的例子：

例子

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .modal {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #cccccc;
        opacity: 0;
        visibility: hidden;
        transform: scale(1.1);
        transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
      }
      .modal-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #eeeeee;
        padding: 1rem 1.5rem;
        width: 24rem;
        border-radius: 0.5rem;
      }
      .close-button {
        float: right;
        width: 1rem;
        line-height: 1.5rem;
        text-align: center;
        cursor: pointer;
        border-radius: 30px;
        background-color: #eeeeee;
      }
      .close-button:hover {
        background-color: #adadad;
      }
      .show-modal {
        opacity: 1;
        visibility: visible;
        transform: scale(1.0);
        transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
      }
    </style>
  </head>
  <body>
    <h2>Create Modal Box</h2>
    <button class="example">关闭对话框</button>
    <div class="modal">
      <div class="modal-content">
        <span class="close-button">&times;</span>
        <h2>This is a Modal</h2>
      </div>
    </div>
    <script>
      let modal = document.querySelector(".modal");
      let trigger = document.querySelector(".example");
      let closeButton = document.querySelector(".close-button");
      function toggleModal() {
        modal.classList.toggle("show-modal");
      }
      function windowOnClick(event) {
        if(event.target === modal) {
          toggleModal();
        }
      }
      trigger.addEventListener("click", toggleModal);
      closeButton.addEventListener("click", toggleModal);
      window.addEventListener("click", windowOnClick);
    </script>
  </body>
</html>

我们还可以创建一个可以使用 CSS3 的强大功能创建的模式弹出窗口：

例子

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .modalDialog {
        position: fixed;
        font-family: Arial, Helvetica, sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.1);
        z-index: 99999;
        opacity: 0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
      }
      .modalDialog:target {
        opacity: 1;
        pointer-events: auto;
      }
      .modalDialog > div {
        width: 400px;
        position: relative;
        margin: 10% auto;
        padding: 5px 20px 13px 20px;
        border-radius: 10px;
        background: -moz-linear-gradient(#2edbe8, #01a6b2);
        background: -webkit-linear-gradient(#2edbe8, #01a6b2);
        background: -o-linear-gradient(#2edbe8, #01a6b2);
      }
      .close {
        background: #606061;
        color: #FFFFFF;
        line-height: 25px;
        position: absolute;
        right: -12px;
        text-align: center;
        top: -10px;
        width: 24px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;
      }
      .close:hover {
        background: #6ed1d8;
      }
    </style>
  </head>
  <body>
    <h2>Create Modal Box</h2>
    <a href="#openModal">Box</a>
    <div id="openModal" class="modalDialog">
      <div>
        <a href="#close" title="Close" class="close">X</a>
        <h2>Modal Box </h2>
        <p>使用css3创建的模态对话框</p>
      </div>
      <a href="#close" title="Close" class="close">x</a>
    </div>
  </body>
</html>

2. 添加 CSS。

第二步是使用 CSS 属性设置我们的 id 样式。

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      #example {
        visibility: hidden;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        z-index: 1000;
      }
    </style>
  </head>
  <body>
    <div id="example">
      <div>
        <p>Any content</p>
      </div>
    </div>
  </body>
</html>

然后在里面的div里放一个样式，让它水平，以获得对话框效果。

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      #example div {
        width: 350px;
        height: 80px;
        margin: 100px auto;
        background-color: #f2f2f2;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border: 1px solid #666666;
        padding: 15px;
        text-align: center;
        font-weight: bold;
        font-size: 15px;
        border: 3px solid #cccccc;
        position: absolute;
        left: 50%;
        top: 100px;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div id="example">
      <div>
        <p>对话框内容</p>
      </div>
    </div>
  </body>
  </html>

为了获得最大的浏览器兼容性，诸如 -Webkitfor Safari、Google Chrome 和 Opera（较新版本）、-Mozfor Firefox 等扩展程序与 border-radius 和转换属性一起使用。

此外，为我们的身体设置高度、边距、填充和字体系列。

body {
height:100%;
margin:0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
color: #666666;
}

1. 创建 HTML。

创建一个带有 id="example" 的 <div>。

此区域内的任何内容都将被浏览器隐藏，然后在激活时显示。
它下面的任何内容都将是用户“不可点击”的。

在 #example 中放置另一个 <div> 以创建对话框外观。
它包含我们想要向用户展示的内容。

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
  </head>
  <body>
    <div id="example">
      <div>
        <p>Any content</p>
      </div>
    </div>
  </body>
</html>

日期：2020-06-02 22:16:14 来源：oir作者：oir

←如何使用 JavaScript 创建对话框

如何从 HTML 字符串创建一个新的 DOM 元素→

3. 添加 JavaScript。

例子

例子

例子

2. 添加 CSS。

1. 创建 HTML。

目录