Question

我有以下代码（取自CSS-Tricks）并且想要在其中添加另一个div（模态窗口），但我似乎无法使其工作。 stock-modal div已经存在于DOM中，但目前是隐藏的，因为我只希望它出现在#overlay div时出现;

$('.stock-check').on('click', function () {

    var docHeight = $(document).height();

    $('body').append('<div id="overlay" />');
    $('#overlay').height(docHeight).css({
        'opacity': 0.7,
        'position': 'absolute',
        'top': 0,
        'left': 0,
        'background-color': 'black',
        'width': '100%',
        'z-index': 10000
    });

    $('<div class="stock-modal" />').appendTo('#overlay').show();

});

当它运行时，它会在overlay div中插入一个空的stock-modal div，但不会在DOM中存在。我做错了什么？

Answer 1

不要创建新的div。首先选择现有的附加现有的。

$(".stock-modal").appendTo('#overlay').show();

Answer 2

您应该更改为，首先选择现有的.stock-modal div并附加到#overlay

$('.stock-modal').appendTo('#overlay').show();

Answer 3

检查叠加div是否已经存在，然后只需添加模态，否则创建叠加并添加模态。

$('.stock-check').on('click', function () {

 var docHeight = $(document).height();

if($('#overlay').length > 0)
{
  $('<div class="stock-modal" />').appendTo('#overlay').show();
}
else
{
 $('body').append('<div id="overlay" />');
 $('#overlay').height(docHeight).css({
    'opacity': 0.7,
    'position': 'absolute',
    'top': 0,
    'left': 0,
    'background-color': 'black',
    'width': '100%',
    'z-index': 10000
 });

 $('<div class="stock-modal" />').appendTo('#overlay').show();
}

});

将div附加到动态创建的div中

3 个答案: