<!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. 为什么要用MarkDown？

    [为什么要用MarkDown?] 大部分作家用 Word 或 Pages 写作,过去的文档也大都以 .doc, .docx 格式或是 Pages 格式储存.还有人为了保证文稿发给谁都能正常打开,会用 ...

  2. javascript学习笔记（五）：异常捕获和事件处理

    异常捕获 Try{ 发生异常的代码块 }catch(err){ 异常信息处理 } <!DOCTYPE html> <html> <head lang="en&q ...

  3. Pandas之数据结构

    pandas入门 由于最近公司要求做数据分析,pandas每天必用,只能先跳过numpy的学习,先学习大Pandas库 Pandas是基于Numpy构建的,让以Numpy为中心的应用变得更加简单 pa ...

  4. PHPActiveRecord 学习一

    #连接数据库 <?phprequire_once dirname(__FILE__) . '/../../ActiveRecord.php'; // initialize ActiveRecor ...

  5. The number of method references in a .dex file cannot exceed 64K.(转)

    前言 我一直都知道app里面的方法数是有限制的差不多64000,具体的就未曾考证了在遇到这个问题之前,一直以为这个一个多么遥远的距离其实并不是的,稍有不慎这个异常出来了当前并不是你真的有编写了64k的 ...

  6. 激活 pycharm

    step1: 在本地 hosts 文件增加一行,windows 路径一般为:C:\Windows\System32\drivers\etc step2: 输入激活码 7SPIY8PDT7-eyJsaW ...

  7. jenkins搭建自动化部署平台（svn+tomcat重启）

    原文链接:http://blog.csdn.net/zjs40/article/details/51818322 jenkins 自动化部署和集成代码的平台 可以将Git svn 上的代码 check ...

  8. 如何解决make: Nothing to be done for `all' 的方法

    正常情况下,当文件没有更新且已经编译过时,再次make就会报这个错误,表示文件未更新,不需要编译. 如果异常情况没有检测到更新文件,或者想要强制重新编译,只需要make clean,再次编译即可.

  9. DC-学习

    1.DC概论一:setup time, hold time之一 http://www.blogbus.com/bb2hh-logs/20463915.html 2.DC概论二:fanout, skew ...

  10. C++中的构造函数

    C++中的构造函数可以分为4类: (1)默认构造函数.以Student类为例,默认构造函数的原型为 Student()://没有参数 (2)初始化构造函数 Student(int num,int ag ...