將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

你應該改變，首先選擇現有.stock-modal股利和appendTo #overlay

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

Answer 2

請勿創建新的div。通過首先選擇它追加現有的。

$(".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(); 
} 

});