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($){functionclosePopup(target){$(target).hide();}functionshowPopup(target){$(target).show();$(target).css("visibility","hidden");varpopupContentHeight=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();});varoptions={ysPopup:function(command){if(command=="show"){showPopup(this);}elseif(command=="hide"){closePopup(this);}else{showPopup(this);}}};$.fn.extend(options);})(jQuery);


测试

<divclass="ys-popupremark-popup"><divclass="ys-popup-content"><divclass="remark-popup-title">备注</div><divclass="remark-popup-content"><textareaplaceholder="请输入备注"></textarea></div><divclass="remark-popup-btn-groupclearfix"><aclass="remark-popup-cancel">取消</a><aclass="remark-popup-ok">确认</a></div></div></div><!--activity-success-popup--><script>$(".ys-popup").ysPopup("show");//显示弹出框$(".ys-popup").ysPopup("hide");//隐藏弹出框</script>