<!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. love is ... ...

    16 years old, love is dream.20 years old, love is sex.30 years old, love is marriage. 40 years old, ...

  2. AdminLTE 动画时间

    app.js AdminLTE.css

  3. SpringCloud报错： "Field discoveryClient in com.controller.DcController required a bean of type 'com.netflix.discovery.DiscoveryClient' that could not be found."

    SpringCloud报错: "Field discoveryClient in com.controller.DcController required a bean of type 'c ...

  4. 简单的jQ代码

    简单的jQ代码 /* * Lazy Load - jQuery plugin for lazy loading images * * Copyright (c) 2007-2012 Mika Tuup ...

  5. C++思考

    1.复杂类型的对象,被栈或者队列等机制进行操作时,需要重新写其拷贝构造函数等,而不能使用默认拷贝构造函数. 2.复杂数据类型的对象的打印,需要对运算符进行重载,或者调用其中定义的打印方法.

  6. java里面获取map的key和value的方法

    获取map的key和value的方法分为两种形式: map.keySet():先获取map的key,然后根据key获取对应的value: map..entrySet():同时查询map的key和val ...

  7. 成对使用new和delete，传值传引用

    首先: delete []p;是用来删除对象数组的,特别是你声明的是对象数组!!! 如果new中用了[],delete一定要用[]:在new中没有使用,在delete中一定不要使用. 其次: 当你使用 ...

  8. jsp选项过长自动换行

    自动换行前是这样的 从源码发现“打发的所发生的7”所在span跨行了,宽度为整行的宽度,不再是自身的实际宽度(一列时所占的宽度) 我的思路是要把这个换行元素前加上<br/>,使得该元素换行 ...

  9. java中元注解有四个

    @Retention @Target @Document @Inherited:  @Retention:注解的保留位置 @Retention(RetentionPolicy.SOURCE)   // ...

  10. Java07-java语法基础（六）面向对象

    Java07-java语法基础(六)面向对象 一.格式化输出 System.out.printf(“%格式字符”,输出项); 1.格式字符: d --->int.byte.short ld -- ...