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模式框

1 个答案: