1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <style type="text/css">
  6.     #login
  7.     {
  8.         display:none;
  9.         border:1em solid #3366FF;
  10.         height:30%;
  11.         width:50%;
  12.         position:absolute;/*让节点脱离文档流,我的理解就是,从页面上浮出来,不再按照文档其它内容布局*/
  13.         top:24%;/*节点脱离了文档流,如果设置位置需要用top和left,right,bottom定位*/
  14.         left:24%;
  15.         z-index:2;/*个人理解为层级关系,由于这个节点要在顶部显示,所以这个值比其余节点的都大*/
  16.         background: white;
  17.     }
  18.     #over
  19.     {
  20.         width: 100%;
  21.         height: 100%;
  22.         opacity:0.8;/*设置背景色透明度,1为完全不透明,IE需要使用filter:alpha(opacity=80);*/
  23.         filter:alpha(opacity=80);
  24.         display: none;
  25.         position:absolute;
  26.         top:0;
  27.         left:0;
  28.         z-index:1;
  29.         background: silver;
  30.     }
  31.     </style>
  32. </head>
  33. <body>
  34.   <a href="javascript:show()">弹出</a>
  35.   <div id="login">
  36.       <a href="javascript:hide()">关闭</a>
  37.       <div>这里是关闭弹窗的内容</div>
  38.   </div>
  39.   <div id="over"></div>
  40. </body>
  41. </html>  
  42.  
  43. <script type="text/javascript">  
  44.  
  45.     function show()
  46.     {
  47.         var login = document.getElementById('login');
  48.         var over = document.getElementById('over');
  49.         login.style.display = "block";
  50.         over.style.display = "block";
  51.     }
  52.     function hide()
  53.     {
  54.        var login = document.getElementById('login');
  55.         var over = document.getElementById('over');
  56.         login.style.display = "none";
  57.         over.style.display = "none";
  58.     }
  59. </script>

一个简单的div弹出层的小例子的更多相关文章

  1. layer —— 一个简单的jQuery弹出层插件

    layer的使用 4.24更新:注意:layer现在有旧版1.8.5版本和新版本3.0版本的,对应引入的JQ也要不同,相对应的JQ引入1.1和3.1,否则JQ会出问题 4.21更新: 解答4-19的问 ...

  2. 转 js一个简单实用的弹出层

      关闭 点击查看 >> <html> <head> <title>新文件标题</title> <script type=" ...

  3. LODOP内嵌挡住浏览器的div弹出层

    首先,做一个简单的div弹出层用于测试,该弹出层的介绍可查看本博客另一篇博文:[JS新手教程]浏览器弹出div层 然后加入LODOP内嵌,LODOP可以内嵌,C-LODOP不能内嵌,可以在IE等浏览器 ...

  4. webui-popover 一个轻量级的jquery弹出层插件

    该提示框插件可以和Bootstrap完美结合,但是并不一定需要和Bootstrap一起使用.它支持IE7以上的浏览器. 首先要引入需要的css  js  文件 <link rel="s ...

  5. 分享一个ASP.NET的弹出层，比较好用！

    网上的一些弹出层的控件多了去了,我很久之前用了一个,效果还不错,但如果应用到ASP.NET的话,会出现“弹出层内的控件runat='server'失效”的情况,具体情况我也不太会描述,但就是那些onc ...

  6. 页面DIV弹出层 JS原生脚本

    <script type="text/javascript"> /*         * 弹出DIV层         */ function showDiv() { ...

  7. div弹出层的效果带关闭按钮

    下面我做的这个是个进度条的弹出层 <style type="text/css"> #tuxiang { width: 57px; } /*div弹出框的css*/ .t ...

  8. layer.js,,,分享一个好用的弹出层

    基本属性: <!DOCTYPE html> <html> <head> <head> <meta content="text/html; ...

  9. 关于div弹出层的实际应用心得

    今天本人要做一个点击弹出的功能,因为这个功能是最后做的,所以写的时候很纠结, 因为本人小菜一枚, 开始尝试用 position:relative:来做一试不行呀 ,因为用这个来做的话 会打乱原有的布局 ...

随机推荐

  1. 使用Template格式化Python字符串

    对Python字符串,除了比较老旧的%,以及用来替换掉%的format,及在python 3.6中加入的f这三种格式化方法以外,还有可以使用Template对象来进行格式化. from string ...

  2. 6.前端基于react,后端基于.net core2.0的开发之路（6） 服务端渲染（SSR）

    0.源码地址 https://gitee.com/teambp/ScaffoldClient  这个地址下载对应源码. 1.服务端渲染是啥? 就是在服务器进行页面渲染(废话),当页面展示后,显示的就是 ...

  3. angular4.0微信oAuth第三方认证的正确方式

    当我们的项目运行在微信端时,用到oAuth第三方认证.问题来了,在ng4中微信认证应该放在哪里呢? 开始项目的时候,我将oAuth认证放在了每个页面模版中,发现返回历史页的时候,需要返回两次. 这个问 ...

  4. 【练习】jQuery

    作业要求: 参考下图,点击展示不同内容. 例: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  5. Java集合干货——ArrayList源码分析

    ArrayList源码分析 前言 在之前的文章中我们提到过ArrayList,ArrayList可以说是每一个学java的人使用最多最熟练的集合了,但是知其然不知其所以然.关于ArrayList的具体 ...

  6. 4.variables

    变量在python可以是字符也可以是数字.例如:   x = 2 price = 2.5 word = 'Hello'   变量名在等号左边,值在右边,一旦变量被指定,就可以在程序的其他地方使用它. ...

  7. 0.python class

    http://pythonprogramminglanguage.com/ 什么是python? python是一款让你工作比起用其他语言更快的编程语言.老练的程序员用其他的语言会比用python更顺 ...

  8. 【jQuery】(6)---jQuery validate插件

    jQuery  validate插件 一.导入js库                                      先导入jQuery库,然后导入Validate插件,如果是中文提示还需要 ...

  9. python网络数据采集（伴奏曲）

    这里是前章,我们做一下预备.之前太多事情没能写博客~..             (此博客只适合python3x,python2x请自行更改代码) 首先你要有bs4模块 windows下安装:pip3 ...

  10. 更换HomeBrew源

    比较少用brew,只有之前安装Opencv的时候用过一次,后面有人问我怎么装,于是帮他研究了一下.MacOS的brew其实就是通过两个git仓库(brew和homebrew-core)来实现的源更新机 ...