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 相关文章推荐
datePicker——日期选择控件(with jquery)
Feb 20 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
Apr 23 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
Dec 29 Javascript
Jquery实现自定义弹窗示例
Mar 12 Javascript
轻松学习Javascript闭包函数
Dec 15 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
jquery实现网页定位导航
Aug 23 Javascript
Vue组件库发布到npm详解
Feb 17 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
新手快速入门微信小程序组件库 iView Weapp
Jun 24 Javascript
ionic3双击返回退出应用的方法
Sep 17 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
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
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
php 时间计算问题小结
2009/01/04 PHP
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
PHP IDE phpstorm 常用快捷键
2015/05/18 PHP
PHP命令Command模式用法实例分析
2018/08/08 PHP
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
10个实用的脚本代码工具
2010/05/04 Javascript
基于jquery的页面划词搜索JS
2010/09/14 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
2015/08/11 Javascript
jquery判断输入密码两次是否相等
2020/04/22 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
jquery对Json的各种遍历方法总结(必看篇)
2016/09/29 Javascript
基于JavaScript实现瀑布流效果
2017/03/29 Javascript
js实现无缝轮播图效果
2020/03/09 Javascript
[47:10]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第二场 12.16
2020/12/18 DOTA
详解Python pygame安装过程笔记
2017/06/05 Python
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
基于python实现名片管理系统
2018/11/30 Python
Python函数装饰器常见使用方法实例详解
2019/03/30 Python
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
python sqlite的Row对象操作示例
2019/09/11 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
python 实现多维数组转向量
2019/11/30 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
母亲节感恩活动记录
2014/03/16 职场文书
质量保证书范本
2014/04/29 职场文书
统计专业自荐书
2014/07/06 职场文书
党校学习心得体会范文
2014/09/09 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python
python opencv检测直线 cv2.HoughLinesP的实现
2021/06/18 Python
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python