Loading

自定义弹窗 

<!DOCTYPE html>
<html lang="zh">
    <style type="text/css">
        .popup {
            position:fixed;
            z-index:2;
            top:60px;
            left:50%;
            width:460px;
            height:270px;
            background:#fff;
            -moz-box-shadow:4px 4px 30px #130507;
            -webkit-box-shadow:4px 4px 30px #130507;
            box-shadow:4px 4px 30px #130507;
            -moz-transition:top 800ms;
            -o-transition:top 800ms;
            -webkit-transition:top 800ms;
            transition:top 800ms;
        }
        .p_close {
            float:right;
            width:15px;
            height:14px;
            margin:11px 10px 0 0;
            /* background:url(../img/popup_close.png); */
        }
        .p_body {
            background:#000;
            left:0;
            top:0;
            position:fixed;
            width:100%;
            height:100%;
            opacity:0.7;
            -moz-transition:opacity 800ms;
            -o-transition:opacity 800ms;
            -webkit-transition:opacity 800ms;
            transition:opacity 800ms;
        }
        .js__slide_top {
            height:0;
            overflow:hidden;
            top:0;
        }
        .js__fadeout {
            height:0;
            overflow:hidden;
            opacity:0;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        (function ($) {
            $.fn.simplePopup = function () {
                var simplePopup = {
                    initialize: function (self) {
                            var popup = $(".js__popup");
                            var body = $(".js__p_body");
                            var close = $(".js__p_close");
                            var hash = "#popup";
                            var string = self[0].className;
                            var name = string.replace("js__p_", "");
    
                            if (!(name === "start")) {
                                name = name.replace("_start", "_popup");
                                popup = $(".js__" + name);
                                name = name.replace("_", "-");
                                hash = "#" + name;
                            };
    
                            self.on("click", function () {
                                simplePopup.show(popup, body, hash);
                                return false;
                            });
    
                            $(window).on("load", function () {
                                simplePopup.hash(popup, body, hash);
                            });
    
                            body.on("click", function () {
                                simplePopup.hide(popup, body);
                            });
    
                            close.on("click", function () {
                                simplePopup.hide(popup, body);
                                return false;
                            });
    
                            $(window).keyup(function (e) {
                                if (e.keyCode === 27) {
                                    simplePopup.hide(popup, body);
                                }
                            });
    
                        },
    
                        centering: function (self) {
                            var marginLeft = -self.width() / 2;
                            return self.css("margin-left", marginLeft);
                        },
    
                        show: function (popup, body, hash) {
                            simplePopup.centering(popup);
                            body.removeClass("js__fadeout");
                            popup.removeClass("js__slide_top");
                            window.location.hash = hash;
                        },
    
                        hide: function (popup, body) {
                            popup.addClass("js__slide_top");
                            body.addClass("js__fadeout");
                            window.location.hash = "#";
                        },
    
                        hash: function (popup, body, hash) {
                            if (window.location.hash === hash) {
                                simplePopup.show(popup, body, hash);
                            }
                        }
                };
    
                return this.each(function () {
                    var self = $(this);
                    simplePopup.initialize(self);
                });
            };
        })(jQuery);
    
        // 初始化
        $(function () {
            $(".js__p_start, .js__p_another_start").simplePopup();
        });
    </script>
    <head>
        <meta charset="utf-8">
        <title>自定义弹窗</title>
    </head>
    <body>
        <h2 style="text-align:center;">自定义弹窗</h2>
        <h3 style="text-align:center;"><a href="#" class="js__p_start">点击弹窗</a></h3>
        <div class="p_body js__p_body js__fadeout"></div>
        <div class="popup js__popup js__slide_top">
            <h1>哈哈哈，内容主体</h1>
            <a href="#" class="p_close js__p_close" title="Close">关</a>
        </div>
    </body>
</html>

参考：http://www.freejs.net/article_jquerywenzi_359.html

^_^

posted @ 2018-04-11 18:39  dai.sp  阅读(272)  评论(0)  编辑  收藏  举报