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 相关文章推荐
用JS实现的一个include函数
Jul 21 Javascript
Javascript模拟加速运动与减速运动代码分享
Dec 11 Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 Javascript
ES6新特性七:数组的扩充详解
Apr 21 Javascript
使用原生js+canvas实现模拟心电图的实例
Sep 20 Javascript
layui实现动态和静态分页
Apr 28 Javascript
JS中验证整数和小数的正则表达式
Oct 08 Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
vue项目中锚点定位替代方式
Nov 13 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 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
用PHP实现登陆验证码(类似条行码状)
2006/10/09 PHP
多个PHP中文字符串截取函数
2013/11/12 PHP
PHP面向对象教程之自定义类
2014/06/10 PHP
php通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
Valerio 发布了 Mootools
2006/09/23 Javascript
从新浪弄下来的全屏广告代码 与使用说明
2007/03/15 Javascript
JS 判断代码全收集
2009/04/28 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
jQuery应用之jQuery链用法实例
2015/01/19 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
简单理解Vue中的nextTick方法
2018/01/30 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
浅谈Vue.use的使用
2018/08/29 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
给你选择Python语言实现机器学习算法的三大理由
2017/11/15 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
Django 中间键和上下文处理器的使用
2019/03/17 Python
python实现连连看游戏
2020/02/14 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
Django多数据库联用实现方法解析
2020/11/12 Python
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
x-ua-compatible content=”IE=7, IE=9″意思理解
2013/07/22 HTML / CSS
腾讯技术类校园招聘笔试试题
2014/05/06 面试题
Linux开机引导的步骤是什么
2014/02/26 面试题
年会活动策划方案
2014/01/23 职场文书
村容村貌整治方案
2014/05/21 职场文书
学习十八大的心得体会
2014/09/01 职场文书
学位证书委托书
2014/09/30 职场文书
上学路上观后感
2015/06/16 职场文书
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS