JavaScript实现模态对话框实例


Posted in Javascript onJanuary 13, 2020

这篇文章主要介绍了JavaScript实现模态对话框实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>dialogue</title>
  <style>
    *{
      margin: 0;
    }
    .hide{
      display: none;
    }
    #div1{
      height: 2000px;
      background-color: #b4b4b4;
      position: fixed;
      width: 100%;
      top: 0;
      left: 0;
    }
    #div2{
      /*display: none;*/
      background-color: red;
      opacity: 0.1;
      position: fixed;
      width: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;

    }
    #div3{
      /*display: none;*/
      height: 200px;
      width: 200px;
      z-index: 1002;
      background-color: crimson;
      position: absolute;
      top: 50%;
      left:50%;
      margin-left: -100px;
      margin-top: -100px;
    }
  </style>
</head>
<body>
<div id="div1">
  <input type="button" value="click" onclick="show()">
</div>
<div id="div2" class="div hide"></div>
<div id="div3" class="div hide">
  <input type="button" value="cancel" onclick="cancel()">
</div>

<script>
  function show() {
    var ele = document.getElementsByClassName("div");
    for (var i = 0; i < ele.length; i++) {
      ele[i].classList.remove("hide");
      console.log(i);
    }
  }
   function cancel(){
      var ele=document.getElementsByClassName("div");
      for (var i=0;i<ele.length;i++){
        ele[i].classList.add(("hide"));
      }
   }

</script>
</body>
</html>

初始页面如下:

JavaScript实现模态对话框实例

点击"click"后显示如下:

JavaScript实现模态对话框实例

点击"cancel"后再回到初始画面.

这段代码模拟了模态对话框的实现过程.

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

Javascript 相关文章推荐
Javascript isArray 数组类型检测函数
Oct 08 Javascript
jQuery入门第一课 jQuery选择符
Mar 14 Javascript
Javascript改变CSS样式(局部和全局)
Dec 18 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
解决jquery实现的radio重新选中的问题
Jul 03 Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
vue实现分页组件
Jun 16 Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 Javascript
JS实现简单省市二级联动
Nov 27 Javascript
Typescript3.9 常用新特性一览(推荐)
May 14 Javascript
JS动态图片的实现方法完整示例
Jan 13 #Javascript
js实现拖动缓动效果
Jan 13 #Javascript
Vue.js中的高级面试题及答案
Jan 13 #Javascript
深入理解redux之compose的具体应用
Jan 12 #Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 #Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 #Javascript
ES2020 新特性(种草)
Jan 12 #Javascript
You might like
全局记录程序片段的运行时间 正确找到程序逻辑耗时多的断点
2011/01/06 PHP
php单例模式的简单实现方法
2016/06/10 PHP
javascript void(0)的妙用
2009/10/21 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
javascript中的delete使用详解
2013/04/11 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
Javascript实现字数统计
2015/07/03 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
JavaScript中各数制转换全面总结
2017/08/21 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
js实现倒计时器自定义时间和暂停
2019/02/25 Javascript
VUE安装使用教程详解
2019/06/03 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
js String.prototype.trim字符去前后空格的扩展
2020/08/23 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程
2018/01/04 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
详解Python设计模式之策略模式
2020/06/15 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
DC Shoes俄罗斯官网:美国滑板鞋和服饰品牌
2020/08/19 全球购物
教师年终个人自我评价
2013/10/04 职场文书
材料会计岗位职责
2014/03/06 职场文书
个人租房协议书样本
2014/10/01 职场文书
小学教育见习报告
2014/10/31 职场文书
社区党建工作总结2015
2015/05/13 职场文书
让人感觉高大上的讲话稿怎么写?
2019/07/08 职场文书