自定义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);
测试
本文名称:自定义popup弹出框
本文网址:http://ybzwz.com/article/jhpcpd.html