点击弹窗

来源：互联网发布：创世数据查询编辑：程序博客网时间：2024/05/18 13:27

一个点击弹出窗的小例子

html：

<div id="main"><a href="javascript:showBg();">点击这里查看效果</a>    <div id="fullbg"></div>    <div id="dialog">        <p class="close"><a href="#" onclick="closeBg();">关闭</a></p>        <div>正在加载，请稍后....</div>    </div></div>

css：

 body {            font-family:Arial, Helvetica, sans-serif;            font-size:12px;            margin:0;        }        #main {            height:1800px;            padding-top:90px;            text-align:center;        }        #fullbg {            background-color:gray;            left:0;            opacity:0.5;            position:absolute;            top:0;            z-index:3;            filter:alpha(opacity=50);            -moz-opacity:0.5;            -khtml-opacity:0.5;        }        #dialog {            background-color:#fff;            border:5px solid rgba(0,0,0, 0.4);            height:400px;            left:50%;            margin:-200px 0 0 -200px;            padding:1px;            position:fixed !important; /* 浮动对话框 */            position:absolute;            top:50%;            width:400px;            z-index:5;            border-radius:5px;            display:none;        }        #dialog p {            margin:0 0 12px;            height:24px;            line-height:24px;            background:#CCCCCC;        }        #dialog p.close {            text-align:right;            padding-right:10px;        }        #dialog p.close a {            color:#fff;            text-decoration:none;        }

js:

  //显示灰色 jQuery 遮罩层    function showBg() {        var bh = $("body").height();        var bw = $("body").width();        $("#fullbg").css({            height:bh,            width:bw,            display:"block"        });        $("#dialog").show();    }    //关闭灰色 jQuery 遮罩    function closeBg() {        $("#fullbg,#dialog").hide();    }

阅读全文

0 0