<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style type="text/css">

    #login

    {

        display:none;

        border:1em solid #3366FF;

        height:30%;

        width:50%;

        position:absolute;/*让节点脱离文档流,我的理解就是,从页面上浮出来,不再按照文档其它内容布局*/

        top:24%;/*节点脱离了文档流,如果设置位置需要用top和left,right,bottom定位*/

        left:24%;

        z-index:2;/*个人理解为层级关系,由于这个节点要在顶部显示,所以这个值比其余节点的都大*/

        background: white;

    }

    #over

    {

        width: 100%;

        height: 100%;

        opacity:0.8;/*设置背景色透明度,1为完全不透明,IE需要使用filter:alpha(opacity=80);*/

        filter:alpha(opacity=80);

        display: none;

        position:absolute;

        top:0;

        left:0;

        z-index:1;

        background: silver;

    }

    </style>

</head>

<body>

  <a href="javascript:show()">弹出</a>

  <div id="login">

      <a href="javascript:hide()">关闭</a>

      <div>这里是关闭弹窗的内容</div>

  </div>

  <div id="over"></div>

</body>

</html>  

<script type="text/javascript">  

    function show()

    {

        var login = document.getElementById('login');

        var over = document.getElementById('over');

        login.style.display = "block";

        over.style.display = "block";

    }

    function hide()

    {

       var login = document.getElementById('login');

        var over = document.getElementById('over');

        login.style.display = "none";

        over.style.display = "none";

    }

</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. file上传图片获取路径地址

    file上传图片获取路径地址 类似:点击button,选择图片,在对应的输入框input里面显示图片路径地址 类似这样 原理:通过opacity来隐藏原生的input file 然后用.file-bt ...

  2. ztree使用font-awesome字体的问题，

    ztree要使用自定义图标字体的时候 需要自己做皮肤cssstyle,官方有文档,但是有些时候我们值需要简单的设置图标字体class样式 是没办法使用的,我们需要对两个函数进行修改. 下面是两个函数请 ...

  3. squid日志分析

    sarg对squid的日志流量分析报表(按小时,天,周生成) 1.SARG介绍 SARG的全称是:Squid Analysis Report GeneratorSARG非常好用的Squid日志分析工具 ...

  4. 使用docker+jenkins构建nodejs前端项目

    前文使用Docker搭建Jenkins+Docker持续集成环境我们已经搭建了基于docker+jenkins的持续集成环境,并构建了基于maven的项目.这一节,我们继续扩展功能,增加对Nodejs ...

  5. Scrapy运行错误：ImportError: No module named win32api

    需要安装pypiwin32,直接通过官网安装exe会出现很多错误,所以直接运行以下命令: pip install pypiwin32

  6. Android热修复框架汇总整理（Hotfix）

      Android平台出现了一些优秀的热更新方案,主要可以分为两类:一类是基于multidex的热更新框架,包括Nuwa.Tinker等:另一类就是native hook方案,如阿里开源的Andfix ...

  7. 51 Nod 1008 N的阶乘 mod P【Java大数乱搞】

    1008 N的阶乘 mod P 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 输入N和P(P为质数),求N! Mod P = ? (Mod 就是求模 %)   例如:n ...

  8. [51nod1291]Farmer

    用单调栈的话不严格的O(n^3)可以轻松艹过去,统计的时候要差分. 可以发现,对于一个单调栈里的元素,从它进栈到出栈都会重复类似的计算..再差分一波后就可以只在出栈的时候计算一下了. 具体的话看代码吧 ...

  9. printf不能直接输出string类型

    因为string不是c语言的内置数据,所以直接printf输出string类型的是办不到的.要这样输出: printf("%s\n",a.c_str()); 举例: #includ ...

  10. hdu_1754I Hate It(线段树)

    hdu_1754I Hate It(线段树) 标签: 线段树 题目链接 题意: 中文题意...不多说了,线段树基础题 直接上代码: #include<cstdio> #include< ...