自定义popup弹出框

Posted 2020-08-11

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>