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

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();

});

当它运行时，它会在覆盖 div 中插入一个空的 stock-modal div，而不是 DOM 中存在的那个。我究竟做错了什么？

Answer 1

不要创建新的 div。通过先选择它来附加现有的。

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

Answer 2

您应该更改为，首先选择现有的.stock-modaldiv 和 appendTo#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();
}

});