弹出层 兼容各大标准浏览器和IE高低版本（8-11）

HTML代码结构如下：

<div class="tff">弹出层</div>
    <div class="tanC">
        <div class="tanC_info">
            <span>x</span>
            <ul>
                <li>斯柯达李开复</li>
                <li>上来看风景</li>
                <li>对方即可</li>
                <li>考虑地方纪委</li>
                <li>看发动机</li>
                <li>单身快乐法规及基本</li>
            </ul>
        </div>
    </div>

js代码代码如下：

<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    <script>
        $(".tff").on('click',function () {
            $(".tanC").show();
        });
        $(".tanC_info>span").on("click",function () {
            $(".tanC").hide();
        })
    </script>

css样式代码如下：

<style>
        body,html{
            margin: 0;
            padding: 0;
        }
        body{
            height: 100%;
        }
        .tff{
            width: 100px;
            height: 40px;
            background: saddlebrown;
            color: seashell;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }
        .tanC {
            display: none;
            width: 100%;
            height: 100%;
            background: #000000;
            background: rgba(0,0,0,0.15);
            filter: alpha(opacity=15);
            position: absolute;
            margin: auto;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
        }
        .tanC_info{
            width: 600px;
            height: 400px;
            background: silver;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
        .tanC_info>span {
            font-size: 26px;
            display: inline-block;
            float: right;
            margin: 0 10px 0 0;
            color: azure;
            cursor: pointer;
        }
    </style>

O(∩_∩)O谢谢！！！

转载于:https://www.cnblogs.com/zxn-9588/p/7477204.html