点击弹出居中的遮罩层代码 - 小才

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>点击弹出居中的遮罩层代码</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
.hidden{display:none;}
#smallLay{width:498px; height:100px;padding:4px 10px 10px;background-color:#FFFFFF;border:1px solid #05549d;color:#333333;line-height:24px;text-align:left;-webkit-box-shadow:5px 2px 6px #000;-moz-box-shadow:3px 3px 6px #555;}
</style>
<script type="text/javascript">
    function showid(idname) {
        var isIE = (document.all) ? true : false;
        var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);
        var newbox = document.getElementById(idname);
        newbox.style.zIndex = "9999";
        newbox.style.display = "block"
        newbox.style.position = !isIE6 ? "fixed" : "absolute";
        newbox.style.top = newbox.style.left = "50%";
        newbox.style.marginTop = -newbox.offsetHeight / 2 + "px";
        newbox.style.marginLeft = -newbox.offsetWidth / 2 + "px";
        var layer = document.createElement("div");
        layer.id = "layer";
        layer.style.width = layer.style.height = "100%";
        layer.style.position = !isIE6 ? "fixed" : "absolute";
        layer.style.top = layer.style.left = 0;
        layer.style.backgroundColor = "#000";
        layer.style.zIndex = "9998";
        layer.style.opacity = "0.6";
        document.body.appendChild(layer);
        var sel = document.getElementsByTagName("select");
        for (var i = 0; i < sel.length; i++) {
            sel[i].style.visibility = "hidden";
        }
        function layer_iestyle() {
            layer.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth)
+ "px";
            layer.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) +
"px";
        }
        function newbox_iestyle() {
            newbox.style.marginTop = document.documentElement.scrollTop - newbox.offsetHeight / 2 + "px";
            newbox.style.marginLeft = document.documentElement.scrollLeft - newbox.offsetWidth / 2 + "px";
        }
        if (isIE) { layer.style.filter = "alpha(opacity=60)"; }
        if (isIE6) {
            layer_iestyle()
            newbox_iestyle();
            window.attachEvent("onscroll", function() {
                newbox_iestyle();
            })
            window.attachEvent("onresize", layer_iestyle)
        }
        layer.onclick = function() {
            newbox.style.display = "none"; layer.style.display = "none"; for (var i = 0; i < sel.length; i++) {
                sel[i].style.visibility = "visible";
            }
        }
    }
</script>
</head>
<body>
<input type="button" id="showbtn" name="showbtn" value="点我弹出层" onclick="showid('smallLay');">
<div id="smallLay" style="display:none;"></div>
</body>
</html>

posted on 2011-07-27 14:42 小才阅读(910) 评论(0) 收藏举报

刷新页面返回顶部