Html-Css-div透明层剧中

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

<title>Div+CSS实现始终居中的半透明弹出层</title>

<style type="text/css">

<!--

html, body {

    height: 100%;

    margin: 0px;

    font-size: 12px;

}

.mydiv {

    background-color: #FFCC66;

    border: 1px solid #f00;

    text-align: center;

    line-height: 40px;

    font-size: 12px;

    font-weight: bold;

    z-index: 999;

    width: 300px;

    height: 120px;

    left: 50%;

    top: 50%;

    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, .popIframe {

    background-color: #666;

    display: none;

    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);

}

.popIframe {

    filter: alpha(opacity = 0); /*IE*/

    opacity: 0; /*FF*/

}

-->

</style>

<script language="javascript" type="text/javascript">

    function showDiv() {

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

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

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

    }

    function closeDiv() {

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

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

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

    }

</script>

</head>

<body>

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

        aaaaaaaaa <br>

        <a href="javascript:closeDiv()">关闭窗口</a>

    </div>

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

    <a href="javascript:showDiv()">点击这里弹出层</a>

    <iframe id='popIframe' class='popIframe' frameborder='0'></iframe>

</body>

</html>
巴特西

Html-Css-div透明层剧中

最新文章

热门文章
