自定义popup弹出框

ys_popup.css

成都创新互联公司业务包括：成品网站、企业产品展示型网站建设、品牌网站制作、电子商务型网站建设、成都外贸网站建设(多语言)、商城系统网站开发、按需定制网站、全网整合营销推广等。效率优先，品质保证，用心服务是我们的核心价值观，我们将继续以良好的信誉为基础，秉承稳固与发展、求实与创新的精神，为客户提供更全面、更优质的互联网服务！

.ys-popup{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    display:none;
    z-index: 99999;
    background-color: rgba(0,0,0,0.4);
}

.ys-popup .ys-popup-content{
    position:absolute;
    left:30px;
    right:30px;
    top:50%;
    display:block;
    background-color:#fff;
    margin:auto;
    border-radius: 4px;
}

ys_popup.js

(function($){

    function closePopup(target){
        $(target).hide();
    }

    function showPopup(target){
        $(target).show();
        $(target).css("visibility","hidden");

        var popupContentHeight = parseInt($(target).find(".ys-popup-content").css("height"));
        $(target).find(".ys-popup-content").css({
            "margin-top":(-1)*popupContentHeight/2+"px"
        });
        $(target).css("visibility","initial");
    }

    $("body").on("click",".ys-popup",function(e){
        e.stopPropagation();
        e.preventDefault();
        $(this).hide();
    });

    $("body").on("click",".ys-popup .ys-popup-content",function(e){
        e.stopPropagation();
        e.preventDefault();
    });


    var options = {
        ysPopup:function(command) {
            if(command=="show"){
                showPopup(this);
            }else if(command=="hide"){
                closePopup(this);
            }else{
                showPopup(this);
            }
        }
    };
    $.fn.extend(options);
})(jQuery);

测试

    
        
            备注