<!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=utf-8" />

<title>JS弹出浮层</title>

<style type="text/css">

.my_div {

    background-color: #ff6;

    border: 1px solid #f90;

    text-align: center;

    line-height: 40px;

    font-size: 12px;

    font-weight: bold;

    z-index: 2;

    width: 600px;

    height: 220px;

    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

            :

            document.body.scrollTop + (document.body.clientHeight - this.clientHeight) / 2 /*IE6*/

        );

    /*IE5 IE5.5*/

}

.bg_div {

    background-color: #ccc;

    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

            :

            document.body.scrollTop + (document.body.clientHeight - this.clientHeight) / 2 /*IE6*/

        );

    /*IE5 IE5.5*/

}

/*The END*/

</style>

<script type="text/javascript">

function showDiv(){

    document.getElementById('my_div').style.display='block';

    document.getElementById('bg_div').style.display='block';

}

function closeDiv(){

    document.getElementById('my_div').style.display='none';

    document.getElementById('bg_div').style.display='none';

}

</script>

</head>

<body>

    <div id="my_div" class="my_div" style="display: none;">

        恭喜你！<br />你的成绩为:60分<br /> <a href="javascript:closeDiv()">关闭窗口</a>

    </div>

    <div id="bg_div" class="bg_div" style="display: none;"></div>

    <div style="padding-top: 20px;">

        <input type="submit" name="" value="显示层"

            onclick="javascript:showDiv()" />

    </div>

</body>

</html>

JS弹出浮层的更多相关文章

  1. 弹出浮层css+JQuery

    先来张效果图: HTML代码如下: <body> <div class="bg" id="bg" style="display: n ...

  2. bootstrap中popover.js(弹出框)使用总结+案例

    bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...

  3. js弹出对话框的方法总结

    九种js弹出对话框的方法总结,需要的朋友可以参考一下 [1.最基本的js弹出对话框窗口代码] 这是最基本的js弹出对话框,其实代码就几句非常简单: <script LANGUAGE=" ...

  4. JS弹出下载对话框以及实现常见文件类型的下载

    写在前面 JS要实现下载功能,一般都是这么几个过程:生成下载的URL,动态创建一个A标签,并将其href指向生成的URL,然后触发A标签的单击事件,这样就会弹出下载对话框,从而实现了一个下载的功能. ...

  5. jquery简易版xwPop.js弹出消息对话框插件

    xwPop.js弹出消息对话框插件是一款含有多种情景模式的原生模态消息对话框代码,可用于替代浏览器默认的alert弹出对话框,它提供各种参数和方法,功能非常强大.目前已经在项目中有应用到xwpop开发 ...

  6. js弹出层

    js弹出层 1.div附近显示 <div id="message"></div> $().delay().hide(); 2.遮罩层 表单提交后遮住页面,等 ...

  7. JS弹出对话框的三种方式

    JS弹出对话框的三种方式 我们用到了alert()方法.prompt()方法.prompt()方法,都是在网页有一个弹出框,那么就让我们探究一下他们之间的区别: 一.第一种:alert()方法 < ...

  8. js弹窗 js弹出DIV,并使整个页面背景变暗

    1.首先写一个遮罩层div,然后再写一个弹窗的div <!-- 遮罩层 --> <div id="cover" style="background: # ...

  9. 【转】js弹出框、对话框、提示框、弹窗总结

    js弹出框.对话框.提示框.弹窗总结 一.js的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹 ...

随机推荐

  1. 好看的IDE配色方案让代码看起来不再那么凶猛了

    写这篇小文的初衷是,笔者是原教旨主义者,一直坚持用IDE默认的配色方案.另外也觉得网上黑色系的配色方案太过bling bling了.但今天尝试用新的配色方案后,兴奋地发现对代码的好感度大幅提升. 嗯, ...

  2. C# 的一些语法特性

    1.? -NullableC# 里像int,bool,double 这样的struct和enum类型都不能为null.如果确实想在值域上加上null的话,Nullable就派上用场了.T?是Nulla ...

  3. UPDATE INNER JOIN 两表联合更新

    UPDATE B_READMETER_HANDWORK INNER JOIN B_READMETER_ORDER_SP ON B_READMETER_HANDWORK.ID = B_READMETER ...

  4. JBoss QuickStart之Helloworld

    下载Jboss, quickstart, 按照quickstart说明, mvn clean install. 由于ssl handshake问题(应该是网络连接不稳定), 写了一个脚本不停地尝试bu ...

  5. 点击input时,里面默认字体消失显示

    点击input时,点击input里面默认字体消失显示: <input type="" name="" id="" value=&quo ...

  6. GIT远程仓库地址变更

    将VS2013的解决方案添加到GIT源代码管理后会增加.gitattributes和.gitignore 2个文件以及.git目录 设置远程地址的文件在.git目录下的config文件中 直接修改上图 ...

  7. 【OpenWRT】【RT5350】【一】OpenWrt开发环境搭建

    [宿主机构建] 本人电脑配置如下: CPU: intel 酷睿 i3 3.3G 双核 内存: 金士顿 8G 硬盘:希捷 1TB 7200rpm 操作系统:win7  旗舰版 64位 OpenWrt是在 ...

  8. 4. Decision Tree

    一般的,一颗决策树包含一个根结点.若干内部结点和若干叶结点:叶节点对应于决策结果,其他每个结点则对应于一个属性测试:每个结点包含的样本集合根据属性测试的结果被划分到子结点中:根结点包含样本全集.从根结 ...

  9. Android 基于Android的手机邮件收发（JavaMail）之三（邮件接收）

    初次做这个程序的时候,是仿照着网上别人的程序做的.因为本人比较菜,是一个新手,以前的基础知识没有学好,所以尽管有了别人的代码但是还是不知道怎么在界面上显示出它的效果来,废话不多少,现在就贴出我的参考程 ...

  10. linux打包与压缩

    打包是指将一大堆文件或目录变成一个总的文件. 压缩则是将一个大的文件通过一些压缩算法变成一个小文件. 标注:linux文件需要先打包后才能进行压缩. tar  –cvf  test.tar  one. ...