Question

我正在尝试用jquery创建一个模态窗口，似乎做得相当好。唯一的问题是，当我第二次点击联系人按钮时，它似乎附加了两个模态框。一个在另一个之上。如果再次点击，则会有第三个....

以下是代码：

$('#contact').on( 'click', function(e){
        e.preventDefault();
        $('body').append('<div id="modal"></div>');
        $("#modal").load('/forms/contact-form.html').hide().fadeIn(1000);
    });

    $('#send').click(function(e){
        $('#modal').remove();
    });

有人可以解释为什么会这样吗？此外，欢迎任何关于我在这里尝试的反馈。

Answer 1

最好的方法是在创建新的模态div时删除模态div。

$('#contact').on('click', function () {
    $('#modal').remove(); //remove modal here
    $('body').append('<div id="modal"></div>');
    $("#modal").load('/forms/contact-form.html').hide().fadeIn(1000);
});

Answer 2

在适合之前尝试删除。

$('#contact').on( 'click', function(e){
        e.preventDefault();
        $('#modal').remove();
        $('body').append('<div id="modal"></div>');
        $("#modal").load('/forms/contact-form.html').hide().fadeIn(1000);
    });

Answer 3

点击后，您应该删除当时在页面上显示的一些模式框。当然，如果有的话存在。

$('body').find("#modal").remove();

或者只是简短形式：

$("#modal").remove();

Answer 4

当#send click #modal未被删除，因为它是动态创建的，因此请使用on()

进行尝试

$(document).on('click','#send',function(e){// jquery event delegation
    $('#modal').remove();// it will remove the dynamically created modal box
});

或者您可以使用像

这样的代码

$('#contact').on( 'click', function(e){
    e.preventDefault();
    if(!$('#modal').length)// append modal only if not present
       $('body').append('<div id="modal"></div>');
    $("#modal").load('/forms/contact-form.html').hide().fadeIn(1000);
});

Answer 5

为什么

每次点击#contact元素时，您的代码都会附加一个新的div。因此，每次单击该按钮时，浏览器都会呈现一个新的模态窗口。

解决方案

仅创建一次模态div并将其重用为变量。您可以使用.appendTo()方法执行此操作。

Here's a demo

var $modal = false;

$('#contact').on( 'click', function(e){

    e.preventDefault();

    if ( ! $modal ){

      $modal = $('<div id="modal"></div>').appendTo('body');

    }

    $modal.load('/forms/contact-form.html').hide().fadeIn(1000);

});

$('#send').click(function(e){

    if ( $modal )
      $modal.hide();

});

JQuery追加 - 删除后的多个实例

5 个答案:

为什么

解决方案