<!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. easyui实现多选框,并且获取值

    在easyui官方文档里面是没有combobox下拉框,可以进行多选的,但是其实是可以多选的, <td align="left">大区:   <input typ ...

  2. 2018徐州网络赛 - Trace

    题意:n个左下角为原点右上角在第一象限的矩形不断覆盖,求最后形成的图形的周长 x和y是独立的,分别维护两棵线段树,一棵表示x坐标下最大的y值,另一棵表示y坐标下最大的x值 从覆盖的角度来考虑,如果逆序 ...

  3. CentOS 7 下 MySql5.7 主从配置

    演示用两台全新MySql服务器: mysql1:10.10.1.55 (主) mysql2:10.10.1.56 (从) 配置主从,步骤如下:   STEP 1:在mysql1上创建复制账号 repl ...

  4. ECharts概念学习系列之ECharts的下载和安装（图文详解）

    不多说,直接上干货! http://echarts.baidu.com/download.html 前言 如果你想要用较少的代码实现比较酷炫的数据统计表,echarts是值得你考虑的一种实现方式.官网 ...

  5. Paths

    Paths 在javax.tools.StandardLocation 枚举类下定义了几个枚举变量,如下: public enum StandardLocation implements Locati ...

  6. 王亮：游戏AI探索之旅——从alphago到moba游戏

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由云加社区技术沙龙 发表于云+社区专栏 演讲嘉宾:王亮,腾讯AI高级研究员.2013年加入腾讯,从事大数据预测以及游戏AI研发工作.目前 ...

  7. TimerJob无法发布新版本问题

    最近遭遇发布TimerJob在测试环境发布没有问题,但是到正式环境发布总是无法执行及调试的问题,经过几天的努力,终于解决了这个问题,下面记录下遭遇的问题. Windows 2008,SharePoin ...

  8. R语言列表list函数

    列表是R语言中的对象,它包含不同类型的元素,比如 - 数字,字符串,向量和另一个列表等.一个列表还可以包含一个矩阵或一个函数作为它的元素.使用list()函数创建列表. 创建一个列表 下面是一个例子来 ...

  9. jdk1.8 HashMap源码讲解

    1. 开篇名义 jdk1.8中hashMap发生了一些改变,在之前的版本中hsahMap的组成是数组+链表的形式体现,而在1.8中则改为数组+链表+红黑树的形式实现,通过下面两张图来对比一下二者的不同 ...

  10. C#实现文件下载的几种方式

    上篇博客也说了下C#中通过XML导出Excel,这些文件操作都挺有用的,下面是文件的下载,之前做项目都是把它写的空间日志中,以后有时间了把它们都弄出来 先把有问题的代码贴出来吧 using Syste ...