【实用随记】JQuery蒙版弹出框

 函数loadPopup() 使弹出框和蒙版渐出(渐出后修改popupStatus 的值 相当于flag )

disablePopup()  渐隐

centerPopup() 计算窗口高宽 给弹出框定位


//蒙版和弹出框初始display:none



var popupStatus = 0;



            function loadPopup(){
                if(popupStatus==0){
                    $("#backgroundPopup").css({
                        "opacity": "0.5"
                    });
                    $("#backgroundPopup").fadeIn("slow");
                    $("#popupContact").fadeIn("slow");
                    popupStatus = 1;
                }
            }


            function disablePopup(){
                if(popupStatus==1){
                    $("#backgroundPopup").fadeOut("slow");
                    $("#popupContact").fadeOut("slow");
                    popupStatus = 0;
                }
            }


            function centerPopup(){
                var windowWidth = document.documentElement.clientWidth;
                var windowHeight = document.documentElement.clientHeight;
                var popupHeight = $("#popupContact").height();
                var popupWidth = $("#popupContact").width();
                $("#popupContact").css({
                    "position": "fixed",
                    "top": windowHeight/2-popupHeight/2,
                    "left": windowWidth/2-popupWidth/2
                });


                $("#backgroundPopup").css({
                    "height": windowHeight
                });


            }




            $(document).ready(function(){


                $("#button").click(function(){
                    centerPopup();
                    loadPopup();
                });


                $("#backgroundPopup").click(function(){
                    disablePopup();
                });
                $(document).keypress(function(e){
                    if(e.keyCode==27 && popupStatus==1){
                        disablePopup();
                    }
                });


            });
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值