最小的响应式jQuery模式弹出窗口

时间:2015-03-26 08:24:44

标签: jquery modal-dialog popup

找到nice responsive popup script,但需要一些帮助。该脚本工作正常,但我想第二次使用弹出链接。

a id="demo" href="#modal-content">Buttons1
a id="demo" href="#modal-content">Buttons2

(函数($,window,document,undefined){

// Create the defaults
var pluginName = 'popUpWindow',
    defaults = {
        action: "open",
        size: "large",
        modal: false
    };

function Plugin(element, options) {
    this.element = element;

    this.options = $.extend({}, defaults, options);

    this._defaults = defaults;
    this._name = pluginName;

    this.init();
}

Plugin.prototype = {
    uniqueID: "pop-up-id-1",

    init: function () {
        var instance = this;

        //Generate random id
        var uniqueNumber = Math.floor(Math.random() * 10000),
            hasButtons = $.isArray(this.options.buttons) && this.options.buttons.length;
        this.uniqueID = "pop-up-id-" + uniqueNumber;

        var popUp =
            $('<div id="pop-up" class="pop-up ' + this.options.size + '" data-pop-up-id="' + this.uniqueID + '">' +
                '  <div class="pop-up-content">' +
                '    <div class="close"></div>' +
                '    <div class="pop-up-main-content"></div>' +
                (hasButtons ? '    <div class="pop-up-footer"></div>' : '') +
                '  </div>' +
                '</div>');

        //Close link click event
        var closeLink = $('<a href="#close" aria-hidden="true" title="Close" class="pop-up-close-trigger"><span class="screen-reader-text">Close</span></a>').click(function (e) {
            e.preventDefault();
            instance.close(instance.element, instance.options);
        });

        $('.close', popUp).append(closeLink);

        // create the background cover
        var bgCover = $('<div class="pop-up-background" data-pop-up-background-id="' + this.uniqueID + '"></div>').appendTo('body');

        //Background click event
        if (!instance.options.modal) {
            bgCover.click(function (e) {
                e.preventDefault();
                instance.close(instance.element, instance.options);
            });
        } else {
            bgCover.addClass("pop-up-background-modal");
        }

        //Create buttons
        if (hasButtons) {

            $.each(this.options.buttons, function (index, item) {
                var icon = item.icon ? '<span class="icon ' + item.icon + '" aria-hidden="true"></span>' : "";
                var showText = item.iconOnly ? "screen-reader-text" : "";
                var cssClass = item.cssClass || "pop-up-btn";
                var button = $('<a href="#" class="' + cssClass + '">' + icon + '<span class="' + showText + '">' + item.text + '</span></a>').click(function (e) {
                    e.preventDefault();

                    // do the click, but set the context as the popup instance, going to pass through the button as a parameter
                    item.click && item.click.apply(instance, [this]);
                });
                $('.pop-up-footer', popUp).append(button);

            });
        }

        //Place content into pop-up body
        var element = $(this.element).removeClass('pop-up-display-content');
        $('.pop-up-main-content', popUp).append(element);

        //Append pop-up to body
        popUp.appendTo('body');

        //Open pop-up
        this.open(this.element, this.options);
    },

    //Opens pop-up
    open: function (el, options) {

        //console.log("Open");
        var popUpObject = $('*[data-pop-up-id="' + this.uniqueID + '"]');

        window.marginTop = $('body').scrollTop() > $('html').scrollTop() ? $('body').scrollTop() : $('html').scrollTop();

        // android position absolute bug fix (http://code.google.com/p/android/issues/detail?id=6721)
        var isAndroid = navigator.userAgent.indexOf("Android");
        if (isAndroid > 0) {
            $('.page-wrapper').hide();
            popUpObject.show().css({ visibility: "visible" });
            $('html, body').scrollTop(0);
        } else {
            popUpObject
                .removeClass("pop-up-fit-screen")
                .css({ display: "block", visibility: "hidden", top: "" })
                .find(".pop-up-content-scroller").height("");

            //Position pop-up in center of screen
            var windowSize = $(window).height();
            var contentSize = popUpObject.outerHeight();

            if (windowSize > contentSize) {
                var contentOffset = Math.round(windowSize / 2) - Math.round(contentSize / 2);
                popUpObject.css("top", window.marginTop + contentOffset + "px");
            } else {
                popUpObject.css("top", window.marginTop + 20 + "px");
            }
            popUpObject.css({ display: "none", visibility: "visible" }).fadeIn(500);
            $('*[data-pop-up-background-id="' + this.uniqueID + '"]').fadeIn(500);
        }

        $.isFunction(options.onOpen) && options.onOpen.call(el);
    },

    //Closes pop-up
    close: function (el, options) {
        //console.log("Close");
        $(".pop-up-background").fadeOut(500);
        $(".pop-up").fadeOut(500);
        $('.page-wrapper').show();
        $('html, body').scrollTop(window.marginTop);

        $.isFunction(this.options.onClose) && this.options.onClose.call(el);

    }
};

$.fn[pluginName] = function (options) {
    return this.each(function () {
        if (!$.data(this, 'plugin_' + pluginName)) {
            $.data(this, 'plugin_' + pluginName,
                new Plugin(this, options));

        } else {
            var pluginInstance = $.data(this, 'plugin_' + pluginName);
            switch (options.action) {
                case "open":
                    return pluginInstance.open(this, options);
                case "close":
                    return pluginInstance.close(this, options);
                default:
                    return pluginInstance.open(this, options);
            }
        }
    });
};

})(jQuery,window,document);

在一个页面中,它没有弹出窗口,只有第一个链接正在工作。

我该怎么做才能解决popupwindow.js

0 个答案:

没有答案