主页 / 网络编程 /

js模态对话框使用方法详解

网络编程 2021-07-04 19:20www.168986.cn编程入门
这篇文章主要为大家详细介绍了js模态对话框的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

模态框（Modal  Dialogue Box）也可叫做模态对话框，或者对话框，当一个模态框被打开时，用户可以与该对话框进行交互，点击关闭按钮可关闭该模态框！

功能实现

1. 页面上有一个按钮，用于打开模态框，模态框默认隐藏；

2. 用户点击按钮，可打开模态框；用户点击模态框中的关闭或者点击页面其他地方可关闭该模态框

✦  点击页面其他地方，关闭模态框，可用window.onclick事件

✦  给关闭按钮绑定点击事件，按钮被点击，模态框Modal添加样式displaynone;

✦  给button按钮绑定点击事件，当按钮被点击时，模态框Modal添加样式display:block;

✦  先获取页面上的button按钮，关闭按钮，以及模态框Modal

代码实现

<html> 
<head> 
  <style> 
    / 弹窗 (background) / 
    .modal { 
      display: none; / 默认隐藏 / 
      position: fixed; 
      z-index: 1; 
      padding-: 100px; 
      left: 0; 
      : 0; 
      width: 100%; 
      height: 100%; 
      overflow: auto; 
      background-color: rgb(0,0,0); 
      background-color: rgba(0,0,0,0.4); 
    } 
 
    / 弹窗内容 / 
    .modal-content { 
      position: relative; 
      background-color: #fefefe; 
      margin: auto; 
      padding: 0; 
      border: 1px solid #888; 
      width: 35%; 
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
      -webkit-animation-name: animate; 
      -webkit-animation-duration: 0.4s; 
      animation-name: animate; 
      animation-duration: 0.4s 
    } 
 
    / 添加动画 / 
    @-webkit-keyframes animate { 
      from {:-300px; opacity:0} 
      to {:0; opacity:1} 
    } 
 
    @keyframes animate { 
      from {:-300px; opacity:0} 
      to {:0; opacity:1} 
    } 
 
    / 关闭按钮 / 
    .close { 
      color: white; 
      float: right; 
      font-size: 28px; 
      font-weight: bold; 
    } 
 
    .close:hover, 
    .close:focus { 
      color: #000; 
      text-decoration: none; 
      cursor: pointer; 
    } 
 
    .modal-header { 
      padding: 2px 16px; 
      background-color: #5587A2; 
      color: white; 
    } 
 
    .modal-body {padding: 2px 16px;} 
 
    .modal-footer { 
      padding: 2px 16px; 
      background-color: #5587A2; 
      text-align: right; 
      color: white; 
    } 
  </style> 
</head> 
<body> 
  <!-- 打开弹窗按钮 --> 
  <button id="myBtn">打开弹窗</button> 
 
  <!-- 弹窗 --> 
  <div id="myModal" class="modal"> 
 
    <!-- 弹窗内容 --> 
    <div class="modal-content"> 
      <div class="modal-header"> 
        <span class="close">×</span> 
        <h2>弹窗头部</h2> 
      </div> 
      <div class="modal-body"> 
        <p>弹窗内容...</p> 
        <p>弹窗内容...</p> 
      </div> 
      <div class="modal-footer"> 
        <h3>弹窗底部</h3> 
      </div> 
    </div> 
 
  </div> 
  <script> 
    // 获取弹窗 
    var modal = document.getElementById('myModal'); 
 
    // 打开弹窗的按钮对象 
    var btn = document.getElementById("myBtn"); 
 
    // 获取 <span> 元素，用于关闭弹窗 that closes the modal 
    var span = document.getElementsByClassName("close")[0]; 
 
    // 点击按钮打开弹窗 
    btn.onclick = function() { 
      modal.style.display = "block"; 
    } 
 
    // 点击 <span> (x), 关闭弹窗 
    span.onclick = function() { 
      modal.style.display = "none"; 
    } 
 
    // 在用户点击其他地方时，关闭弹窗 
    window.onclick = function(event) { 
      if (event.target == modal) { 
        modal.style.display = "none"; 
      } 
    } 
  </script> 
</body> 
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。

上一篇：基于Bootstrap 3 JQuery及RegExp的表单验证功能 下一篇：javascript获取以及设置光标位置

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by