When implementing Javascript to create a modal, I have encountered an issue where the close button disappears. The modal opens and loads different HTML files dynamically using the jQuery load() method, but the close button vanishes.
I suspect that the modal is loading first, followed by the load() method, causing the close button to disappear. How can I adjust this so that the close button remains visible?
<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
})
}());