ys_popup.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
(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);


測試

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    <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>