Question

我正在为我的目的编写一个简单的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>

Answer 1

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

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

＆＃13;

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

＆＃13;

PreparedStatement

＆＃13;

code

＆＃13;

Answer 2

为了使用JQuery检索数据属性值，请使用以下代码

语法

$('selector').data('data-KeyName');

实施例

1. $(this).data('backDiv'); // use to retrive value    or
2. var temp=$(this).data('backDiv'); // use to retrive value and assign into variable

Answer 3

将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>');

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

3 个答案:

语法

实施例