<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>modaldemo</title>

    <style media="screen">

      #modal-overlay {

           visibility: hidden;

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

           left: 0px;

           top: 0px;

           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 style="position: relative">

    <div style="width: 600px; height: 600px;">

      <div id="modal-overlay">

        <div class="modal-data">

          <p>一个简单的模态框。</p>

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

        </div>

      </div>

    </div>

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

    <script type="text/javascript">

      function overlay () {

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

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

      }

    </script>

  </body>

</html>
注意：#modal-overlay 一定要是相对body来设置绝对定位。若是不给body设置position，#modal-overlay 就是相对html设置了绝对定位，当html页面太高或者太宽而出现滚动条的时候，#modal-overlay 就没有覆盖整个页面的效果了。

【html/css】模态框的实现的更多相关文章

  1. 伪类target实现纯css模态框

    今天看到一个纯css模态框,觉得是很牛呀 看了下用了target伪类, 一直不知道有这么神奇的伪类 .. 用法是这样的,给模态框一个id, <div id="pop" cla ...

  2. CSS之样式属性(背景固定、圆形头像、模态框)

    CSS属性 一.宽和高 width属性可以为元素设置宽度. height属性可以为元素设置高度. 块级标签才能设置宽度,内联标签的宽度由内容来决定. div {width: 1000px;backgr ...

  3. JS /CSS 实现模态框（注册和登录组件）

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 44 CSS 浮动 模态框 定位

    一.浮动 float : 浮动的盒子不占原来的位置,其下方的盒子会上移 父盒子会发生塌陷现象.同一级盒子right浮动,同级左边的盒子需要左浮动,right浮动的盒子才能上来 由于浮动框不在文档的普通 ...

  5. Bootstrap 模态框（Modal）插件

    原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆 ...

  6. Bootstrap <基础三十二>模态框（Modal）插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用  ...

  7. Bootstrap 3 模态框播放视频

    Bootstrap 3 模态框播放视频 I'm trying to use the Modal feature from Bootstrap 3 to show my Youtube video. I ...

  8. 去除bootstrap模态框半透明阴影

    当使用bootstrap模态框默认自带半透明阴影,如果想要去除阴影,需要怎么做呢? 今天在项目中我遇到了这个问题,想要去除模态框的阴影,试了好久都没解决.后来问同事的时候才知道,当模态框弹出后,会加上 ...

  9. bootstrap日期控件在火狐下的模态框中选择时间下拉菜单无效的解决办法

    今天收到程序组提交的一个兼容BUG,在火狐中使用模态框加载日期控件时选择时间下拉菜单没有效果(不能点击),而在谷歌中却是好的, 排错思路:1,在当前页面主层放置一个时间控件,测试通过 2,在ajax加 ...

随机推荐

  1. Objective-C语法之类和对象

    https://blog.csdn.net/totogo2010/article/details/7708731 Objective-C语法之类和对象 2012年07月02日 17:19:42 知行合 ...

  2. linux常见编辑命令

    保存命令 按ESC键 跳到命令模式,然后: :w 保存文件但不退出vi :w file 将修改另外保存到file中,不退出vi :w! 强制保存,不推出vi :wq 保存文件并退出vi :wq! 强制 ...

  3. Web篇之JS性能优化

    首先,性能优化分好几个方面,本章我们从js方面来优化. 1:垃圾收集 日常中的某些情况下垃圾收集器无法回收无用变量,导致的一个结果就是——内存使用率不断增高,以下为对应的情况以及处理方法. ①对象相互 ...

  4. [Re:从零开始的分布式] 0.x——分布式基础概念

    分布式的特点 1. 分布式 2. 对等性 3. 并发性 4. 缺乏全局时钟 5. 故障总是会发生 分布式环境的问题 1. 网络不可靠 2. 网络分区 3. 节点故障 CAP理论 一致性 可用性 分区容 ...

  5. [Re:从零开始的分布式] 0.x——分布式锁概述

    为什么需要分布式锁 Martin Kleppmann是英国剑桥大学的分布式系统的研究员,Martin认为一般我们使用分布式锁有两个场景: 效率:使用分布式锁可以避免不同节点重复相同的工作,这些工作会浪 ...

  6. CountDownLatch的简单实现

    1. @Data public abstract class BaseLatch { private int limit; protected int running; BaseLatch(int l ...

  7. 开源项目-Aiguille

        项目地址: https://github.com/wwkai555/Aiguille 这个项目主要使用Android L新特性 - 最新的widget以及一些值得推荐和使用的开源库比如butt ...

  8. 使用NHibernate（1）--资料汇总

    NHibernate最新版本是4.0,目前还只是alpha版,没有发布.稳定版本是3.3,项目中用的也是这个版本,所以以后的介绍都是基于这个版本的. 在网上找了一下相关的学习资料,现汇总如下: NHi ...

  9. 【开源组件】FastDFS极速入门与安装

    FastDFS是一个开源的轻量级的分布式文件系统,为互联网量身定制,充分考虑了冗余备份.负载均衡.线性扩容等机制,并注重高可用.高性能等指标,使用FastDFS很容易搭建一套高性能的文件服务器集群提供 ...

  10. ASP.NET Core 中的依赖注入

    目录 什么是依赖注入 ASP .NET Core 中使用依赖注入 注册 使用 释放 替换为其它的 Ioc 容器 参考 什么是依赖注入 软件设计原则中有一个依赖倒置原则(DIP),为了更好的解耦,讲究要 ...