使用jQuery脚本获取多个弹出窗口

时间:2015-05-05 16:34:02

标签: javascript jquery html popup

我正在使用这个弹出脚本。 Click

当我向页面添加第二个弹出窗口时,它们都会弹出,页面上的低一个弹出窗口优先显示在顶部。我无法弄清楚如何编写它,这样你就可以在页面上有多个弹出窗口。

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);

HTML

<script type="text/javascript">
    $(function() {
        $(".js__p_start, .js__p_another_start").simplePopup();
    });
</script>

<div class="p_anch">
    <a href="#" class="js__p_start">Click Here,</a> jQueryScript.nEt
</div>
<div class="p_body js__p_body js__fadeout"></div>
<div class="popup js__popup js__slide_top">
    <a href="#" class="p_close js__p_close" title="Close"></a>
    <div class="p_content">jQueryScript.Net Demo</div>
</div>

0 个答案:

没有答案