<!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. V4 V7 V13支持包的区别(转)

    三者均为支持包,可以让低版本系统使用高版本特性,支持最小版本有差异 V4支持1.6以上 V7支持2.1以上 V13支持3.2以上 V7依赖V4 转自:

  2. spring xml头文件xmlns和xsi的意思

    在spring的配置中,总能看见如下的代码: <beans xmlns="http://www.springframework.org/schema/beans" xmlns ...

  3. 164. Maximum Gap (Array; sort)

    Given an unsorted array, find the maximum difference between the successive elements in its sorted f ...

  4. 微信小程序开发——setData的使用技巧

    前言: 之前使用 setData,一直都是作为给变量赋值,感觉比起vue给data中的变量的赋值还是有点麻烦的. 最近项目不太紧张,为了提高小程序的开发效率及提升小程序开发的能力,又重新的通读了下小程 ...

  5. IOS是否存在32位和64位版本的区分

    苹果于2013年9月推出了iPhone 5S新手机,采用的全新A7处理器其最大特色就是支持64位运算.其64位A7处理器的使用意味着iPhone性能会大有提高,性能和速度更加出色:而要到达到这样的性能 ...

  6. Java03-Java语法基础（二）运算符

    Java语法基础(二)运算符 一.运算符 1.算数运算符:+.-.*./.% 1)双目运算符:二元运算符,参加运算的对象有两个(+.-.*./.%) 2)单目运算符:一元运算符,参加运算的对象只有一个 ...

  7. 32-改变eclipse默认的Tomcat部署路径

    转载:https://www.cnblogs.com/helf/p/9433588.html eclipse中默认的项目部署路径是在项目的路径,不像myeclipse那样部署后项目在Tomcat的安装 ...

  8. solr简介、学习详细过程！（超详细~）

    solr是什么呢? 一.Solr它是一种开放源码的.基于 Lucene Java 的搜索服务器,易于加入到 Web 应用程序中. 二.Solr 提供了层面搜索(就是统计).命中醒目显示并且支持多种输出 ...

  9. WEB框架之Ajax

    一 Ajax简介 1 Ajax的介绍 AJAX翻译成中文就是"异步Javascript和XML".即使用JavaScript语言与服务器进行异步交互,传输的数据为XML(当然,传输 ...

  10. node.js中npm包管理工具

    现在安装node.js,默认就会帮我们装上了npm包管理工具,npm主要用来下载,安装,管理第三方模块. 创建一个包描述文件: npm init [-y] 查看包的信息 npm info <pa ...