<!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. cocos2dx跨平台使用自定义字体

    首先需要一个ttf文件的字体. 在ios中的方法: 把ttf文件放入资源文件下,然后在你的工程的Info.plist文件中新建一行(Add Row),添加key为:Fonts provided by ...

  2. linux下udp编程

    #include<sys/types.h> #include<sys/socket.h> #include<unistd.h> #include<netine ...

  3. （转）C#操作PPT

    原文地址:http://blog.163.com/loveyingchun_1314/blog/static/2382425120124312627530/ 引用Microsoft.Office.Co ...

  4. 10G之后统计信息收集后为什么执行计划不会被立马淘汰

    在10G之前,使用DBMS_STATS收集统计信息将会导致与此对象相关的游标失效,下次执行此 的时候将会进行HARD PARSE,除非收集的时候NO_INVALIDATE设置为TRUE. 由于硬解析会 ...

  5. opencv编程解决warning C4003: “max”宏的实参不足

    忘了把程序出错的代码附上了,运行修改好的程序才发现的.只好把问题的代码大致写一下了: warning C4003: “min”宏的实参不足 error C2589: “(”:“::”右边的非法标记 e ...

  6. 多线程（二）NSThread

    一.NSThread优缺点      优点:NSThread是最轻量级的      缺点:需要自己管理线程的生命周期,线程同步.线程同步对数据的加锁会有一定的系统开销   二.NSThread的使用 ...

  7. APP完整的启动流程

    0.加载+load方法 1.执行Main函数 2.执行UIApplicationMain函数. 3.创建UIApplication对象,并设置UIApplicationMain对象的代理.UIAppl ...

  8. SSH Secure Shell Client的傻瓜式使用方法

    说明:本记录仅是使用此软件的一种简单的操作方式,如果想深入研究,请做如下三件事: 1)到其官网了解她的前世今生 2)下载她.安装她.操作她(这一步需要不断的尝试.不断的深入.不断的探索,当然最好理论结 ...

  9. python和php对比

    对php比较熟悉,最近开始学些python,总是搞混,特记录下来,用于熟悉python:1.python数组和php不同,php相对简单统一,即array(包括普通数组和关联数组两部分),python ...

  10. sql server查询出的结果中添加一列序列行

    select row_number()over(order by id) as rownum ,[UserName] ,[Password] ,[Mobile] ,[Email] ,[Sex] ,[C ...