模拟苹果弹窗（js操作，避免踩坑）

今天那算是来做个笔记吧，因为遇到一个h5页面要操作弹窗，然后寻到一个这个，话不多说，贴代码

css

   /*==========弹窗========*/
    /*背景层*/
    #popLayer {
        display: none;
        background-color: #B3B3B3;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10;
        -moz-opacity: 0.8;
        opacity:.80;
        filter: alpha(opacity=80);/* 只支持IE6、7、8、9 */
    }

    /*弹出层*/
    #popBox {
        display: none;
        background-color: #FFFFFF;
        z-index: 11;
        position:fixed;
        width: 300px;
        text-align: center;
        right:0;
        top: 50%;
        transform: translate(0,-50%);
        left:0;
        margin:auto;
        border-radius: 10px;
    }
    /*弹出层 不符合*/
    #nopopBox {
        display: none;
        background-color: #FFFFFF;
        z-index: 11;
        position:fixed;
        width: 300px;
        text-align: center;
        right:0;
        top: 50%;
        transform: translate(0,-50%);
        left:0;
        margin:auto;
        border-radius: 10px;
    }

    /*关闭按钮*/
    #popBox .close2 a {
        text-decoration: none;
        color: #2aabd2;
    }
    /*关闭按钮  不符合*/
    #nopopBox .close2 a {
        text-decoration: none;
        color: #2aabd2;
    }
    .content title{font-size: 20px;}
    .close2{padding:10px;color: #2e6da4;}
    .ct-top{padding:20px;border-bottom: 1px solid #ccc}
    

html

    <div id="popLayer"></div>
    <!--相符-->
    <div id="popBox">
        <div class="content">
            <div class="ct-top">
                <div style="color: #000">提示</div>
                <div style="font-size: 16px">确定余额是否相符?</div>
            </div>
            <div class="close2">
                <a style="margin-right:60px" href="javascript:void(0)" onclick="closeBoxs()">取消</a>
                <a href="javascript:void(0)" onclick="closeBox()">确定</a>
            </div>
        </div>
    </div>
    <!--不相符-->
    <div id="nopopBox">
        <div class="content">
            <div class="ct-top">
                <div style="color: #000">提示</div>
                <div style="font-size: 16px">余额不相符，需要调节?</div>
            </div>
            <div class="close2">
                <a style="margin-right:60px" href="javascript:void(0)" onclick="closeBoxsa()">取消</a>
                <a href="javascript:void(0)" onclick="closeBoxa()">调节</a>
            </div>
        </div>
    </div>

js

============================================*/

    function accord() {
        var popBox = document.getElementById("popBox");
        var popLayer = document.getElementById("popLayer");
        popBox.style.display = "block";
        popLayer.style.display = "block";
    }
    /*点击确定按钮*/
    function closeBox() {
        var popBox = document.getElementById("popBox");
        var popLayer = document.getElementById("popLayer");
        popBox.style.display = "none";
        popLayer.style.display = "none";
        $.ajax({
            url: '11',
            type: 'POST',
            contentType: "application/json",
            dataType: 'json',
            data: JSON.stringify({
             
            }),
            success: function (data) {
                if (data.code === 0) {
                  
                } else {
                   
                }

            }
        })
    }
    /*点击取消按钮*/
    function closeBoxs() {
        var popBox = document.getElementById("popBox");
        var popLayer = document.getElementById("popLayer");
        popBox.style.display = "none";
        popLayer.style.display = "none";
    }
    /*==============================相符操作============================================*/
 
    /*点击弹出按钮*/
    /*==============================不相符操作============================================*/
    function buxiangfu() {
        var popBox = document.getElementById("nopopBox");
        var popLayer = document.getElementById("popLayer");
        popBox.style.display = "block";
        popLayer.style.display = "block";

    }
    /*点击确定按钮*/
    function closeBoxa() {
        var popBox = document.getElementById("nopopBox");
        var popLayer = document.getElementById("popLayer");
        popBox.style.display = "none";
        popLayer.style.display = "none";
        //做操作
    }
    /*点击取消按钮*/
    function closeBoxsa() {
        var popBox = document.getElementById("nopopBox");
        var popLayer = document.getElementById("popLayer");
        popBox.style.display = "none";
        popLayer.style.display = "none";
    }
    /*==============================不相符操作
   

有需要可以沾一下，自己笔记。