javascript - 如何在jQuery对象中保持对另一个jQuery对象的引用？

我正在为我的目的编写一个简单的jQuery插件，该插件：


创建背景div（出于阻止目的，例如modal dialog）。 （用backDiv引用）
显示该背景。
显示$(this)。
单击背景可删除背景并隐藏$(this)。


除了第4个以外，我能够执行所有这些操作：由于无法保存对背景div的引用，因此无法找回并删除它。

我尝试了$(this).data('backDiv',backDiv);和$(this)[0].backDiv = backDiv;

我知道有很多插件可以做到这一点，包括jQuery自己的对话框函数，但是我想创建自己的版本。

我无法在全局范围内保留此变量，因此，即使有可能，如何在jQuery对象（或DOM对象？）中保留对backDiv的引用？

更新：我允许这些元素中的多个元素相互重叠显示：Nested modal dialogs。

更新2：

(function($) {

  $.fn.showModal = function() {
    var backDiv = $('<div style="width: 100%; height: 100%; background-color: rgba(55, 55, 55, 0.5); position:absolute;top:0px;left:0px;">This is backDiv</div>');
    $(this).data('backDiv', backDiv);
    $('body').append(backDiv);

    //TODO: bringToFront(backDiv);
    $(this).show();
    //TODO: bringToFront($(this);

    var thisRef = $(this);
    backDiv.click(function() {
      thisRef.closeModal();
    });

    return $(this);
  };
  $.fn.closeModal = function() {
    //PROBLEM (null): var backDiv = $(this).data('backDiv');
    //backDiv.remove();
    $(this).data('backDiv', '');
    $(this).hide();
  }
}(jQuery));

$(document).ready(function() {
  $('#a').showModal();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="a" style="display:none;z-Index:2;background:red; width: 100px; height:50px;position:absolute"></div>

最佳答案

将data-backDiv=""添加到动态模态div中

在下面更改

var backDiv = $('<div data-backDiv="" style="width: 100%; height: 100%; background-color: rgba(55, 55, 55, 0.5); position:absolute;top:0px;left:0px;">This is backDiv</div>');