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 相关文章推荐
js类后台管理菜单类-MenuSwitch
Sep 12 Javascript
cnblogs TagCloud基于jquery的实现代码
Jun 11 Javascript
JQuery中html()方法使用不当带来的陷阱
Apr 07 Javascript
JavaScript版DateAdd和DateDiff函数代码
Mar 01 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
Jan 09 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 Javascript
window.onload绑定多个事件的两种解决方案
May 15 Javascript
JS原型链 详解及示例代码
Sep 06 Javascript
Vue 短信验证码组件开发详解
Feb 14 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
Sep 01 Javascript
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 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
迪菲-赫尔曼密钥交换(Diffie?Hellman)算法原理和PHP实现版
2015/05/12 PHP
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
javascript 获取模态窗口的滚动位置代码
2013/08/06 Javascript
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
2016/05/20 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
JavaScript基础教程之如何实现一个简单的promise
2018/09/11 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
2019/02/18 jQuery
Vue watch响应数据实现方法解析
2020/07/10 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
js实现简单的无缝轮播效果
2020/09/05 Javascript
socket + select 完成伪并发操作的实例
2017/08/15 Python
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
关于numpy数组轴的使用详解
2019/12/05 Python
pytorch之添加BN的实现
2020/01/06 Python
iPython pylab模式启动方式
2020/04/24 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
Pandas之缺失数据的实现
2021/01/06 Python
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
PHP中如何使用Cookie
2015/10/28 面试题
临床医学专业个人的自我评价
2013/09/27 职场文书
小学生期末评语大全
2014/04/21 职场文书
幼儿园标语大全
2014/06/19 职场文书
餐厅收银员岗位职责
2015/04/07 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
python 离散点图画法的实现
2022/04/01 Python
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python