多个 kylefox jquery 模态框

Question

我有多个包含模态框的元素，出于某种原因，这些框只会在第一次单击时打开。

$(function(){
    $('a[data-modal').click(function() {
        $(this).parent().find('div').modal();
        return false;
    });
});

<article>
    <div>Modal One <a href="#" rel="modal:close">Close</a> or press ESC </div>
    <a href="#" data-modal>Open Modal</a>
</article>
<article>
    <div>Modal Two <a href="#" rel="modal:close">Close</a> or press ESC </div>
    <a href="#" data-modal>Open Modal</a>
</article>

谢谢！

Js Fiddle https://jsfiddle.net/td9vfctz/2/

Answer 1

DEMO

注释掉这部分：

//this.$body.append(this.$elm);

它正在从原处移除目标元素并将其放入正文中。这就是为什么 $(this).parent().find('div') 找不到的原因，如果你第二次启动模式。

编辑

您也可以这样做，将元素的克隆附加到正文中：

this.$body.append(this.$elm.clone().hide());

DEMO 2

编辑 2

如果您不想更改插件本身，这里是解决方案：

 $('a[data-modal').click(function() {
      $(this).parent().find('div').clone().modal();
      return false;
 });

DEMO 3

多个 kylefox jquery 模态框

Multiple kylefox jquery modal boxes

jquery

modal-dialog