JQuery扩展帮助 - 添加条件语句

Question

我试图编写一个JQuery包装器扩展，它接受一个内容div，然后以模态方式显示它。我有点麻烦让它工作。它似乎可以在菊花链中使用，但是当我尝试使用多行时，我就会破坏它。菊花链的问题是我不知道如何在那里得到条件。

这不起作用

(function ($) {
    $.fn.showAsModal = function () {
        var ret = this.css({ 'position': 'absolute', 'top': '400px', 'left': '100px', 'z-index': '9001' });
        if (this.parent('.modal-container').size() <= 0) ret = this.wrap("<div style=\"display:none;\" class=\"modal-container\"></div>");
        if (this.siblings('.modal-mask').size() <= 0) ret.parent().insertAfter("<div style=\"width:" + $(document).width() + "px;height:" + $(document).height() + "px;\" class=\"modal-mask\"></div>");
        return ret;
    };
})(jQuery);

这样做

(function ($) {
    $.fn.showAsModal = function () {
        return this.css({ "position": "absolute", "top": "400px", "left": "100px", "z-index": "9001" })
        .wrap("<div style=\"display:none;\" class=\"modal-container\"></div>")
        .parent().show()
        .append("<div style=\"width:" + $(document).width() + "px;height:" + $(document).height() + "px;\" class=\"modal-mask\"></div>")
        .end();
    };
})(jQuery);

但我不知道如何在那里获得条件......

这就是我想要做的事情：

鉴于

<div id="content">
    This is a content window
</div>

我想

<div class="modal-container" style="">
    <div id="content" style="position: absolute; top: 400px; left: 100px; z-index: 9001;">
        This is a content window
    </div>
    <div class="modal-mask" style="width: 1680px; height: 897px;">
    </div>
</div>

当我做$（'＃content'）。showAsModal（）;

Answer 1

你可以试试这个：

(function ($) {
$.fn.showAsModal = function () {
    return this.each(function(){
        var self = $(this)
        self.css({'position': 'absolute', 'top': '400px', 'left': '100px', 'z-index': '9001'});

        if (self.parent('.modal-container').length <= 0)
            self.wrap("<div style=\"display:none;\" class=\"modal-container\"></div>");
        if (self.siblings('.modal-mask').length <= 0)
            self.parent().append("<div style=\"width:" + $(document).width() + "px;height:" + $(document).height() + "px;\" class=\"modal-mask\"></div>");

    });
};
})(jQuery);

this.each()将在jquery选择的每个元素上运行。

Answer 2

您无法为this分配值，return ret;会返回undefined，因为未定义ret。也许你想做这样的事情：

var ret = this.css(...);
...
return ret;