1

我有以下代码(从 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 中存在的那个。我究竟做错了什么?

4

3 回答 3

2

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

$(".stock-modal").appendTo('#overlay').show();
于 2012-10-25T12:38:40.660 回答
1

您应该更改为,首先选择现有的.stock-modaldiv 和 appendTo#overlay

$('.stock-modal').appendTo('#overlay').show();
于 2012-10-25T12:38:51.313 回答
0

检查覆盖 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();
}

});
于 2012-10-25T12:47:22.437 回答