Question

I have the following code (lifted from CSS-Tricks) and want to add another div (modal window) into it, but I cant seem to get this to work. The stock-modal div already exists in the DOM, but is currently hidden as I only want it to appear when the #overlay div is present;

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

});

When this runs, it inserts an empty stock-modal div inside the overlay div but not the one that exists in the DOM. What am I doing wrong?

Answer 1

You should change to, first select the existing .stock-modal div and appendTo #overlay

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