jQuery自定义弹出插件

时间:2019-05-02 10:26:58

标签: javascript plugins jquery-plugins

我在jquery中创建了自定义弹出式插件。

问题在于onClose函数适用于每个元素。但是如您所见,我想称其为#ozalpopup1而不是#ozalpopup2。因此,在控制台上,#ozalpopup2 onClose事件发生时我不会看到关闭文本。

插件脚本

(function ($) {

    $.fn.ozalpopup = function (options) {
        // Establish our default settings
        var settings = $.extend({
            overlay     : '.ozalpopup-overlay',
            open_class  : 'popup-open',
            state       : 'close',
            onOpen      : null,
            onOpened    : null,
            onClose     : null,
            onClosed    : null,
            onConfirm   : null,
            onCancel    : null,
        }, options);

            // popup 
            var self = this;
            // confirm button
            var confirm_button = self.find('[rel="confirm:popup"]');
            // reset button
            var cancel_button = self.find('[rel="cancel:popup"]');


            /**
             * Close popup
             */
            function close_popup(popup) 
            {
                if ($.isFunction(settings.onClose)) {
                    settings.onClose.call(self);
                }
            }


            /**
             * 
             */
            $('[rel="popup:close"]').click(function () {
                // close popup
                close_popup(self);
            })
    }


}(jQuery));

在这里我打电话给插件

$('#ozalpopup1').ozalpopup({
    onClose: function(){
        console.log('closing');
    }
});

$('#ozalpopup2').ozalpopup();

0 个答案:

没有答案