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


Posted in Javascript onFebruary 16, 2017

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

功能实现:

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

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

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

✦  给关闭按钮绑定点击事件,按钮被点击,模态框Modal添加样式display:none;

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

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

代码实现:

<html> 
<head> 
  <style> 
    /* 弹窗 (background) */ 
    .modal { 
      display: none; /* 默认隐藏 */ 
      position: fixed; 
      z-index: 1; 
      padding-top: 100px; 
      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 { 
      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: animatetop; 
      -webkit-animation-duration: 0.4s; 
      animation-name: animatetop; 
      animation-duration: 0.4s 
    } 
 
    /* 添加动画 */ 
    @-webkit-keyframes animatetop { 
      from {top:-300px; opacity:0} 
      to {top:0; opacity:1} 
    } 
 
    @keyframes animatetop { 
      from {top:-300px; opacity:0} 
      to {top: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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery ul标签下拉菜单演示代码
Dec 11 Javascript
JavaScript模块规范之AMD规范和CMD规范
Oct 27 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
Nov 11 Javascript
Bootstrap中data-target 到底是什么
Feb 14 Javascript
angular十大常见问题
Mar 07 Javascript
浅谈JavaScript正则表达式-非捕获性分组
Mar 08 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
基于vue展开收起动画的示例代码
Jul 05 Javascript
微信小程序+云开发实现欢迎登录注册
May 24 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 Javascript
javascript实现滚轮轮播图片
Dec 13 Javascript
javascript获取以及设置光标位置
Feb 16 #Javascript
JavaScript实现翻页功能(附效果图)
Feb 16 #Javascript
浅谈$_FILES数组为空的原因
Feb 16 #Javascript
原生js实现秒表计时器功能
Feb 16 #Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 #Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 #Javascript
js实现3d悬浮效果
Feb 16 #Javascript
You might like
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
关于php开启错误提示的总结
2019/09/24 PHP
Laravel5.3+框架定义API路径取消CSRF保护方法详解
2020/04/06 PHP
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
Js获取图片原始宽高的实现代码
2016/05/17 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
jQuery遍历节点方法汇总(推荐)
2017/05/13 jQuery
原生JS发送异步数据请求
2017/06/08 Javascript
node中使用es5/6以及支持性与性能对比
2017/08/11 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
JavaScript经典案例之简易计算器
2020/08/24 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
2020/11/13 Javascript
Python常用的日期时间处理方法示例
2015/02/08 Python
python如何删除文件中重复的字段
2019/07/16 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
Python的Django框架实现数据库查询(不返回QuerySet的方法)
2020/05/19 Python
scrapy框架携带cookie访问淘宝购物车功能的实现代码
2020/07/07 Python
利用python 下载bilibili视频
2020/11/13 Python
用css3制作纸张效果(外翻卷角)
2013/02/01 HTML / CSS
加拿大时尚床上用品零售商:QE Home | Quilts Etc
2018/01/22 全球购物
编写一个 C 函数,该函数在一个字符串中找到可能的最长的子字符串,且该字符串是由同一字符组成的
2015/07/23 面试题
安全大检查反思材料
2014/01/31 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
科技活动周标语
2014/10/08 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书