处理 jQuery 小部件关闭方法

handle jQuery widget close method

本文关键字：方法 jQuery 小部 处理      更新时间：2023-09-26

我是jQuery小部件的新手，并试图学习它，我创建了一个用于显示对话框的小部件，该小部件的_create()方法执行以下操作：

添加用于隐藏用户屏幕的遮罩对话框。添加一个关闭"按钮"，它是一个带有单击事件处理程序的div向用户显示对话框

当我单击关闭div 时，我可以使用以下命令删除小部件实例 -

$(this).parent().remove();

我没有找到隐藏我在_create方法中创建的屏幕遮罩div的方法。

创建和关闭方法的代码如下 -

_create: function () {
            var handle = this;
            if (this.options.Height == 0) this.options.Height = this.element.height();
            if (this.options.Width == 0) this.options.Width = this.element.width();
            $(document.body).css({ margin: 0, padding: 0 });
            this.wrapper = $("<div class='wrapperClass'>").css({
                'height': this.options.Height,
                'width': this.options.Width,
                'position': 'absolute',
                'left': '50%',
                'margin-left': -1 * this.options.Width / 2,
                'top': '50%',
                'margin-top': -1 * this.options.Height / 2,
                'border': '3px solid red',
                'border-radius': this.options.Radius,
                'z-index': this.options.Zindex
            });
            //create the screen masking background 
            this.maskScreen = $('<div />').css({ 'height': '100%', 'width': '100%', 'position': 'absolute', 'top': 0, 'left': 0, 'background-color': this.options.bgColor, 'z-index': this.options.Zindex - 1, 'display': 'block', 'opacity': this.options.bgOpacity, 'margin': 0, 'padding': 0 });
            $('body').append(this.maskScreen);
            this.element.css('display', 'block');
            this.wrapper.html(this.element);
            $('body').append(this.wrapper);
            if (this.options.addClose) this._addClose();
        },
        _addClose: function () {
            this.closeButton = $('<div />')
            //add close class
            .addClass("closeClass").css("z-index", this.options.Zindex + 1);
            this.closeButton.on("click", function () {
                $(this).parent().remove();
            });
            this.wrapper.append(this.closeButton);
        },

如何引用在 _create() 方法中创建的屏幕遮罩div？

您应该

使用 jqueryUI 小部件_destroy方法来为您进行清理，这样您就可以引用您在 _create 方法中添加的所有变量和元素，并以正确的顺序将它们全部删除以恢复环境。

在这种情况下，您的closeButton应该简单地调用小部件实例的_destroy方法，而不是自己执行任何删除。

如果你可以发布一个工作的jsFiddle，我会告诉你实际的代码。

相关文章：