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 相关文章推荐
查询json的数据结构的8种方式简介
Mar 10 Javascript
javascript数组操作总结和属性、方法介绍
Apr 05 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 Javascript
JavaScript中Cookie操作实例
Jan 09 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
jQuery表格插件datatables用法详解
Nov 23 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
纯JS代码实现隔行变色鼠标移入高亮
Nov 23 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
JavaScript构造函数原理及实现流程解析
Nov 19 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在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
php入门教程 精简版
2009/12/13 PHP
PHP 设置MySQL连接字符集的方法
2011/01/02 PHP
慎用preg_replace危险的/e修饰符(一句话后门常用)
2013/06/19 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
Laravel框架基于ajax实现二级联动功能示例
2019/01/17 PHP
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
2015/08/24 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
浅谈JavaScript对象的创建方式
2016/06/13 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
AngularJS基础 ng-click 指令示例代码
2016/08/01 Javascript
javascript中BOM基础知识总结
2017/02/14 Javascript
javascript+css3开发打气球小游戏完整代码
2017/11/28 Javascript
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
python使用pil生成缩略图的方法
2015/03/26 Python
pycharm安装图文教程
2017/05/02 Python
快速了解python leveldb
2018/01/18 Python
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
Python快速查找list中相同部分的方法
2018/06/27 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
python 线性回归分析模型检验标准--拟合优度详解
2020/02/24 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
python中类与对象之间的关系详解
2020/12/16 Python
几个Linux面试题笔试题
2012/12/01 面试题
小学生作文评语大全
2014/04/21 职场文书
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
Python实现制作销售数据可视化看板详解
2021/11/27 Python
详解在OpenCV中如何使用图像像素
2022/03/03 Python
MySQL范围查询优化的场景实例详解
2022/06/10 MySQL