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

Question

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

1. 创建背景 div(用于阻塞目的，如 模态对话框)。 (用 backDiv 引用)
2. 显示该背景。
3. 显示$(this)。
4. 删除背景并在点击背景时隐藏 $(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>

Answer 1

我建议您使用复杂的 dom 对象，类似于 angular 指令，基本上，您必须使用在 dom 中表示为 Group 的组件对象。

所以，按照我所说的，您的模态组件应该是这样的:

var Modal = (function($) {
  var tpl = '<div style="display:none;" class="modal"><div class="modal-backdrop"></div><div class="modal-content"></div></div>';
  
  function Modal(container) {
    var self = this;

    this.container = $(container || 'body');
    this.tpl = $(tpl).appendTo(this.container);
    this.content = $('.modal-content', this.tpl);
    this.backdrop = $('.modal-backdrop', this.tpl);
    
    this.isOpened = false;
    
    this.ANIMATION_DURATION = 500;
    
    this.backdrop.click(function(e) { self.toggle(e) });
  }
  
  Modal.prototype.show = function(cb) {
    var self = this;
    cb = $.isFunction(cb) ? cb : $.noop;
  
    this.tpl.fadeIn(this.ANIMATION_DURATION, function() {
      self.isOpened = true;
      cb();
    });
    
    return this;
  };
  
  Modal.prototype.hide = function(cb) {
    var self = this;
    cb = $.isFunction(cb) ? cb : $.noop;
  
    this.tpl.fadeOut(this.ANIMATION_DURATION, function() {
      self.isOpened = false;
      cb();
    });
    
    return this;
  };
  
  Modal.prototype.toggle = function() {
    if(this.isOpened) {
      return this.hide();
    }
    
    return this.show();
  };
  
  Modal.prototype.setContent = function(content) {
    this.content.html($('<div />').append(content).html());
    
    return this;
  };
  
  
  return Modal;
})(window.jQuery);

function ExampleCtrl($) {
  var modal = new Modal();
  
  modal.setContent('<h1>Hello World</h1>');
  
  $('#test').click(function() {
    modal.show();
  });
}

window.jQuery(document).ready(ExampleCtrl);

.modal {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.modal .modal-backdrop {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  
  background: rgba(0, 0, 0, .8);
}

.modal .modal-content {
  width: 300px;
  height: 150px;
  background: #fff;
  border: 1px solid yellow;
  position: absolute;
  
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -75px;
  
  line-height: 150px;
  text-align: center;
}

h1 {
  line-height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="test">Test Modal</button>