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

使用jQuery的.load（）方法将动态内容加载到模态中

1 个答案: