JQ 写简单模态框

JQ 写简单模态框

如何使用 JQ 实现简单的弹窗提示框

    
            <div class="mask"></div>
            <div class="modelBox">
               <p class="title">2019年9月8日 晴天☀️<span>×</span></p>
               <p class="cont" style="font-size:18px;color:red;">对世界温柔以待，你也将被温柔待之</p>
               <p class="cont">by 糖糖戒了糖</p>
            </div>
            <a href="#">登录</a>
    

        
                < style type="text/css"> 
                    body,
                    div,
                    a,
                    p,
                    span {
                        margin: 0;
                        padding: 0;
                    }
            
                    .mask {
                        width: 100%;
                        height: 100%;
                        background: rgba(0, 0, 0, .5);
                        position: absolute;
                        z-index: 1;
                        display: none;
                    }
            
                    .modelBox {
                        padding: 20px;
                        border-radius: 10px;
                        width: 300px;
                        height: 200px;
                        background: #fff;
                        position: absolute;
                        z-index: 2;
                        display: none;
                    }
            
                    span {
                        float: right;
                        cursor: pointer;
                    }
            
                    .title {
                        border-bottom: 1px #ccc solid;
                        text-align: center;
                        font-weight: bold;
                        padding: 5px 0 10px 0;
                    }
                    .cont{
                        padding-top:40px;
                        text-align: center;
                    }
                    </style> 
        
    

        
            $(function () {
                //浏览器大小发生改变
                $(window).resize(function () {
                    showCenter();
                });
    
                //模态框出现
                $("a").bind("click", function () {
                    $(".mask").fadeIn(1000);
                    $(".modelBox").fadeIn(1000);
                    $(this).css("display", "none");
                    showCenter();
                });
                //点击span关闭
                $("span").bind("click", function () {
                    $(".mask").fadeOut(1000);
                    $(".modelBox").fadeOut(1000);
                });
    
                //居中显示
                function showCenter() {
                    var $vW = $(window).width();
                    var $w = $(".modelBox").outerWidth();
                    var $vH = $(window).height();
                    var $h = $(".modelBox").outerHeight();
                    $(".modelBox").css({ "left": ($vW - $w) / 2 + "px", "top": ($vH - $h) / 2 + "px" });
                };
    
                //绑定键盘事件  按下esc键退出
                $(document).keyup(function (ev) {
                    //alert(ev.keyCode);  获取esc的键码27
                    if (ev.keyCode == 27) {
                        // $("span").click();
                        //模拟事件
                        $("span").trigger("click");
                    }
                })
    
            })