<!DOCTYPE>

<html>

<head>

    <style>/* 定义模态对话框外面的覆盖层样式 */

        #modal-overlay {

            visibility: hidden;

            position: absolute;   /* 使用绝对定位或固定定位  */

            left: 0;

            top: 0;

            width:100%;

            height:100%;

            text-align:center;

            z-index: 1000;

            background-color: #333;

            opacity: 0.5;   /* 背景半透明 */

        }

        /* 模态框样式 */

        .modal-data{

            width:300px;

            margin: 100px auto;

            background-color: #fff;

            border:1px solid #000;

            padding:15px;

            text-align:center;

        }

    </style>

</head>

<body>

    <div id="modal-overlay" style="visibility: hidden;">

        <div class="modal-data">

            <p>一个很简单的模态对话框 </p>

            <p>点击<a onclick="overlay()" href="">这里</a>关闭</p>

        </div>

    </div>

    <a href="#" onclick="overlay()">显示模态对话框</a>

    <script>function overlay(){

        var e1 = document.getElementById('modal-overlay');

        e1.style.visibility = (e1.style.visibility == "visible")? "hidden" : "visible";

    }</script>

</body>

</html>

js模态框实现原理的更多相关文章

  1. JS模态框 简单案例

    演示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8 ...

  2. 原生js模态框实现

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  3. 【js】再谈移动端的模态框实现

    移动端模态框的机制因为与PC的模态框机制一直有所区别,一直是许多新人很容易踩坑的地方,最近笔者作为一条老咸鱼也踩进了一个新坑中,真是平日里代码读得太粗略,故而写上几笔,以儆效尤. 故事的起因是这样的, ...

  4. js控制Bootstrap 模态框（Modal）插件

    js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html

  5. Js实例——模态框弹出层

    1.描述 百度登录就是一个模态框弹出层.思路分析:先将灰色大背景和登陆盒子设为不可见,利用JS将其动态加载可见. 2.代码 <!DOCTYPE html> <html> < ...

  6. Bootstrap入门（二十三）JS插件1：模态框

    Bootstrap入门(二十三)JS插件1:模态框 1.静态实例 2.动态实例 3.模态框的尺寸和效果 4.包含表单的模态框 模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能 ...

  7. [js高手之路]设计模式系列课程-单例模式实现模态框

    什么是单例呢? 单,就是一个的意思.例:就是实例化出来的对象,那合在一起就是保证一个构造函数只能new出一个实例,为什么要学习单例模式呢?或者说单例模式有哪些常见的应用场景.它的使用还是很广泛,比如: ...

  8. 7-20 jquery遍历节点，bootstrap模态框绑定事件和解绑，mock.js，model.urlroot,id,打基础

    7-19 1:$(event.target).parents().filter("tr").find("host-name") 为什么选择不到别的host-na ...

  9. MVC中调用模态框之后导致JS失效

    今天在工作中碰到一个页面调用模态框之后,页面原来的JS失效的问题,由于前台经验较少,折腾了一天... 问题描述是这样,在页面,有两个下拉列表框A和B,做了下拉列表框联动,有一个button按钮会调用模 ...

随机推荐

  1. spring boot IDEA 开发微服务(二)

    https://www.cnblogs.com/spaceud/p/8097934.html 参考以上微博,自己实际操作步骤如下: 1~开发准备 JDK:1.8 Spring Boot:2.1.0 S ...

  2. Linux 永久PATH环境变量

    在/etc/profile文件中添加变量[对所有用户生效(永久的)] 用vim在文件/etc/profile文件中增加变量,该变量将会对Linux下所有用户有效,并且是“永久的”. 例如:编辑/etc ...

  3. 在 Android Studio 上调试数据库 ( SQLite ) （转）

    转自:http://c.colabug.com/thread-1781696-1-1.html 以前 Eclipse 时代,调试 SQLite 都是将数据库文件导出到电脑,然后再用软件打开查看.现在我 ...

  4. java swing示例

    该范例主要是JFrame(框架)和Jpanel(画板),在Jpanel容器上添加控件,然后再把Jpanel放进JFrame的容器里面. FrameDemo.java import java.awt.D ...

  5. js navigator对象

    原文:https://www.cnblogs.com/huyihao/p/6003110.html Navigator 对象包含有关浏览器的信息. 很多时候我们需要在判断网页所处的浏览器和平台,Nav ...

  6. Appium+python自动化1-环境搭建

    一.前言 appium可以说是做app最火的一个自动化框架,它的主要优势是支持android和ios,另外脚本语言也是支持java和Python.小编擅长Python,所以接下来的教程是appium+ ...

  7. Genymotion 模拟器上网出现 net::ERR_NAME_NOT_RESOLVED

    Genymotion 模拟器在公司网络安装的,然后启动能正常上网,把笔记本带回家,网络变化了,再使用模拟器 上网显示: (net::ERR_NAME_NOT_RESOLVED) 各种百度,最后用如下方 ...

  8. privilege instruction error

    检查新建的回调函数是否用了__stdcall修饰

  9. f5售后查询

    登录: https://secure.f5.com/validate/validate.jsp http://boochem.blog.51cto.com/628505/633907

  10. 绝对路径${pageContext.request.contextPath}

    ${pageContext.request.contextPath}用于解决使用相对路径时出现的问题,它的作用是取出所部署项目的名字. 如图,${pageContext.request.context ...