js遮罩效果

浏览数：29 / 时间：2015年06月09日

　　今天要实现一个弹出框居中的问题,由于有滚动条,不知道怎么设置高度.

再次感谢网友提供的源代码. 由于比较急,一时忘记出处,真的很抱歉.

<style>
 .joinclub
        {
            width: 350px;
            height: 60px;
            padding-left: 20px;
            padding-top: 20px;
            border: 1px solid #a3bad9;
            border-radius: 5px;
            background: #fff;
            padding-top: 10px;
            position: absolute;
            z-index: 99999999;
            display: none;
            left: 50%; /*FF IE7*/
            top: 50%; /*FF IE7*/
            margin-left: -220px !important; /*FF IE7 该值为本身宽的一半 */
            margin-top: -140px !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*/
        }
        .bg123
        {
            background-color: #ccc;
            width: 100%;
            height: 100%;
            z-index: 99999998;
            left: 0;
            top: 0; /*FF IE7*/
            filter: alpha(opacity=50); /*IE*/
            opacity: 0.5; /*FF*/
            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*/
        }

</style>

下面这一段代码要放在 </body>和</html>之间

</body>
<div class="joinclub" id="joinclub" style="display: none">
    我是遮罩中间的提示框
    <input type="button" value="关闭我" onclick="closeCustomer()" />
</div>
<div id="bg123" alt="我是遮罩的背景色" class="bg123" style="display: none;">
</div>
<script type="text/javascript">
    function closeCustomer() {
        document.getElementById("joinclub").style.display = ‘none‘;
        document.getElementById("bg123").style.display = ‘none‘;
    }
    function join_club() {
            $("#joinclub").html($("#div_hid").html());
            document.getElementById(‘joinclub‘).style.display = ‘block‘;
            document.getElementById(‘bg123‘).style.display = ‘block‘;
    }
</script>
</html>

感谢

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

js遮罩效果