使用 jQuery 的 .load() 方法将动态内容加载到模式中

Question

我正在使用 Javascript 创建一个模式，当我单击多个链接时，模式会打开并使用 jQuery load() 方法在其中动态加载不同的 HTML 文件。这工作正常，因为所有内容都已加载。

唯一的问题是关闭按钮消失了。

我认为正在发生的是首先加载模式，然后 load() 方法直接运行，因此关闭按钮消失。

如何更改此设置，以便我有关闭按钮？

<nav>
    <a href="data.html">Load Content</a>
    <a href="data_two.html">Load Second</a>
    <a href="data_three.html">Load Third</a>
    <a href="data_four.html">Load Fourth</a>
</nav>
<section id="content">
    <div id="container">
        <p>Hello world This is the data page</p>
    </div>
</section> 

/* modal windoW */
var modal = (function() {
    var $window = $(window);
    var $modal = $('<div class="modal" />');
    var $content = $('<div id="container" />');
    var $close = $('<button role="button" class="modal-  
    close">close</button>');

    $modal.append($content, $close);

    $close.on('click', function(e) {
        e.preventDefault();
        modal.close();
    });

    return {
        center: function() {
            var top = Math.max($window.height() - $modal.outerHeight(), 0) / 2;
            var left = Math.max($window.width() - $modal.outerWidth(), 0) / 2;
            $modal.css({
                top: top + $window.scrollTop(),
                left: left + $window.scrollLeft()
            });
        },
        open: function(settings) {
            $content.empty().append(settings.content);
            $modal.css({
                width: settings.width || 'auto',
                height: settings.height || 'auto'
            }).appendTo('body');
            modal.center();
            $(window).on('resize', modal.center);
        },
        close: function() {
            $content.empty();
            $modal.detach();
            $(window).off('resize', modal.center);
        }
     };
}());

/*initialise modal*/
(function() {
    var $content = $('#container').detach();
    $('a').on('click', function(e) {
        e.preventDefault();
        var page = $(this).attr('href');
        modal.open({
            content: page,  
            width: 340, 
            height: 300
        }); 
        $('.modal').load(page);     
        return false
    })
}());

Answer 1

您正在选择父元素，因此它正在替换整个内容。尝试选择内部 div。

将$('.modal').load(page); 替换为$('.modal #container').load(page);