<!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. centos6安装自带php

    一.Centos 6安装自带PHP CentOS 默认仓库中包含了php套件,我们可以直接使用yum安装.下面是最小化安装,我们使用php-fpm来解析php. yum install -y php- ...

  2. cakephp 利用Pushapi扩展 进行app 消息推送

    public function push_designer_app($params) { $this->layout = false; $this->autoRender = false; ...

  3. BOM 表

    ';--查看BOM创建日期时间 SELECT * FROM SAPSR3.ZSTPO_OUT2011_1@SAP_SEP; SELECT * FROM SAPSR3.ZSTPO_OUT2012_1@S ...

  4. linux之master和minion

    saltstack博客地址: https://www.cnblogs.com/pyyu/p/9465608.html在线yaml文件编写:http://www.bejson.com/validator ...

  5. 不要62(数位DP)

    不要62 http://acm.hdu.edu.cn/showproblem.php?pid=2089 Time Limit: 1000/1000 MS (Java/Others)    Memory ...

  6. Win10 安装 Anaconda3 用 Anaconda3 安装TensorFlow 1.2 （只支持python3.5）

    Win10 安装 Anaconda3 1.安装Anaconda3 选择相应的Anaconda进行安装,下载地址点击这里,下载对应系统版本的Anaconda,官网现在的版本是Anaconda 4.3.1 ...

  7. HDU 2680 Choose the best route(SPFA)

    Problem DescriptionOne day , Kiki wants to visit one of her friends. As she is liable to carsickness ...

  8. django的中间件:process_request|process_response|process_view|process_exception

    MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware. ...

  9. day 25 udp, socketserver

    建立UDP连接的示例: # server端 import socket sk = socket.socket(type=socket.SOCK_DGRAM) sk.bind(('127.0.0.1', ...

  10. python学习-(__new__方法和单例模式)

    class Dog(object): __instance = None __init_flag = False def __new__(cls, name): if cls.__instance = ...