根据juery CSS点击一个标签弹出一个遮罩层的简单示例

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="JS/JavaScript/jquery-1.7.2.min.js"></script> 
    <style type="text/css">
        .Calculator_box-opened {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            overflow-y: visible;
            display: none;
            background-color: #000;
            opacity: 0.8;
            filter: alpha(Opacity=80, FinishOpacity=50, Style=0, StartX=0, StartY=0, FinishX=100, FinishY=100);
            z-index: 1099;
        } 
        .Calculator_box {
            padding: 0px;
            width: 520px;
            margin: 100px auto;
            text-align:center;
            background-color: #FFF;
            position: relative;
        } 
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
            var speed = 600;//动画速度
            $("#dj").click(function (event) {//绑定事件处理
                event.stopPropagation();
                $("#Calculator").show(speed);//动画显示
            });
            //单击除空白区域外的空白区域就隐藏
            $(document).click(function () {
                if (!$(event.srcElement).is(".Calculator_box,.Calculator_box *")) {
                    $("#Calculator").hide(speed);
                }
            });
        });
    </script>

</head>
<body>
    
    <input type="button" value="点击我弹出层吧" id="dj" />
    <div class="Calculator_box-opened" id="Calculator">
        <div class="Calculator_box">
             <span style="color:red; font-size:16px">大家好，我是弹出层哟！</span>
        </div>
    </div>
</body>
</html>

　　简单示例比较容易懂！

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