<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>无标题文档</title>
<style type="text/css">
/*弹出层的STYLE*/
html,body {height:100%; margin:0px; font-size:12px;}

.mydiv {

border: 1px solid #f90;
text-align: center;
line-height: 40px;
font-size: 12px;
font-weight: bold;
z-index:99;
width: 300px;
height: 120px;
left:50%;/*FF IE7*/
top: 50%;/*FF IE7*/

margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */
margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/

margin-top:0px;

position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/

_top:       expression(eval(document.compatMode &&
            document.compatMode=='CSS1Compat') ?
            documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
            document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/

}

.bg {

width: 100%;
height: 100%;
left:0;
top:0;/*FF IE7*/
filter:alpha(opacity=50);/*IE*/
opacity:0.5;/*FF*/
z-index:1;

position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/

_top:       expression(eval(document.compatMode &&
            document.compatMode=='CSS1Compat') ?
            documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
            document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/

}
/*The END*/

</style>
<script type="text/javascript">
function showDiv(){
document.getElementById('popDiv').style.display='block';
document.getElementById('bg').style.display='block';
}

function closeDiv(){
document.getElementById('popDiv').style.display='none';
document.getElementById('bg').style.display='none';
}

</script>
</head>

<body>

<div id="popDiv" class="mydiv" style="display:none;">恭喜你！<br/>你的成绩为:60分<br/>
<a href="javascript:closeDiv()">关闭窗口</a></div>
<div id="bg" class="bg" style="display:none;"></div>

<div style="padding-top: 20px;">
<input type="Submit" name="" value="显示层" onclick="javascript:showDiv()" />
</div>
</body>
</html>

DIV JS CSS 轻量级弹出层 兼容各浏览器的更多相关文章

  1. js进阶 11-20 弹出层如何制作

    js进阶 11-20 弹出层如何制作 一.总结 一句话总结:其实就是一个div,控制显示和隐藏即可.设置成绝对定位更好,就可以控制弹出层出现的位置.关闭的画质需要将display重新设置为none就好 ...

  2. JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法

    本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法.分享给大家供大家参考.具体分析如下: 在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操 ...

  3. 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth

    变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...

  4. JS来添加弹出层，并且完成锁屏

    上图 <html> <head> <title>弹出层</title> <style type="text/css"> ...

  5. html/css/js-layer弹出层的初次使用

    学习前端有时很多时候要用到弹出层,原生的js写有些麻烦,而且不美观,基于jQuery的弹出层组件layer应运而生,近些年来备受青睐.官网上有使用教程,但当初用的时候还是糊里糊涂,今天来记录一下lay ...

  6. 在vue中继续使用layer.js来做弹出层---切图网

    layer.js是一个方便的弹出层插件,切图网专注于PSD2HTML等前端切图多年,后转向Vue开发.在vue开发过程中引入layer.js的时候遇到了麻烦.原因是layer.js不支持import导 ...

  7. （三）原生JS实现 - 插件 - 弹出层

    创建遮罩层 _createCover: function() { var newMask = document.createElement("div"); newMask.id = ...

  8. js漂亮的弹出层

    1.漂亮的弹出层----artDialog http://aui.github.io/artDialog/ 2.弹出层 ------layer http://sentsin.com/jquery/la ...

  9. JS简易弹出层

    目标 实现简易的js弹出框.为了简单灵活的在小项目中使用. 实现思路 研究bootstrap的弹出框效果后,认为层级示意图如下: 层说明 弹出层分为三层.最底层的遮罩层,覆盖在浏览器视口上.它之上是弹 ...

随机推荐

  1. [POJ 2923] Relocation (动态规划 状态压缩)

    题目链接:http://poj.org/problem?id=2923 题目的大概意思是,有两辆车a和b,a车的最大承重为A,b车的最大承重为B.有n个家具需要从一个地方搬运到另一个地方,两辆车同时开 ...

  2. sublime text编辑器删除已安装的插件

    1.ctr+shift+P,输入package2.查找remove package3.输入你要删除的package4.回车,OK

  3. Flex应用一览表

    1.Flex控件之repeater和radioButton控件应用 2.Flex之DataGrid和Tree控件的数据源XML格式  3.Flex控件之combobox应用 4.转:Flex的Arra ...

  4. Rational Functional Tester 对象文件（rftdef）合并

    Rational Functional Tester (RFT) 是一款集成在Eclipse上的自动化测试工具.而自动化测试最麻烦的维护部分,一大部分也是指的是对象库文件的管理维护. 之前的项目里,经 ...

  5. 学习练习 Java冒泡排序 二分查找法

    冒泡排序: // 冒泡排序 /* System.out.println("请输入要排序的个数:"); Scanner v = new Scanner(System.in); int ...

  6. Chrome 和 Webkit 的渊源

    互联网的浪潮从未停息,而用以网上冲浪的冲浪板也一直在变得愈加精良.自人们进入互联网时代以来,即已经发生了三次浏览器大战.第一次浏览器大战的主角是IE和Netscape,最终IE凭借着Windows的庞 ...

  7. SVN与TortoiseSVN实战：TortoiseSVN新建及合并分支

    硬广:<SVN与TortoiseSVN实战>系列已经写了两篇,第一篇<SVN与TortoiseSVN实战:从入门到精通>,关于分支和标签的知识介绍可翻阅第二篇<SVN与T ...

  8. 网络设备模拟器 GNS3

    https://www.gns3.com/support/docs/linux-installation sudo dpkg --add-architecture i386 sudo add-apt- ...

  9. C/C++中产生随机数

    可以使用srand()函数和rand()函数来产生随机数,其中srand()用来初始化随机数种子,rand()用来产生随机数.因为默认情况下随机数种子为1,而相同的随机数种子产生的随机数是一样的,失去 ...

  10. ping 以及 traceroute 用法

    目的:学习linux命令ping,traceroute的用法 1:ping的用法: man ping ping:判断某个主机是否有响应 linux-8o9i:~ # 119.29.29.29 PING ...