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);
测试
<div class="ys-popup remark-popup" >
<div class="ys-popup-content">
<div class="remark-popup-title">备注</div>
<div class="remark-popup-content"><textarea placeholder="请输入备注"></textarea></div>
<div class="remark-popup-btn-group clearfix">
<a class="remark-popup-cancel">取消</a>
<a class="remark-popup-ok">确认</a>
</div>
</div>
</div><!-- activity-success-popup -->
<script>
$(".ys-popup").ysPopup("show");// 显示弹出框
$(".ys-popup").ysPopup("hide");// 隐藏弹出框
</script>
转载于:https://blog.51cto.com/antlove/1856855