Question

I work with a simple modal to understand how jQuery modal works. With this process

var load = 'alert.html'; // THE PURPOSE OF THIS QUESTION IS TO CHANGE "alert.html" to "image.jpg"
$(this).click(function(e) {
    e.preventDefault();
    $('body').append('<div id="overlay" />');
    $('#overlay').fadeIn(300, function() {
        $('body').append('<div id="alertModalOuter"><div id="alertModal"></div></div>');
        var outer = $('#alertModalOuter');
        var modal = $('#alertModal');
        var defWidth = outer.outerWidth();
        var defHeight = outer.outerHeight();
        modal.load(load + ' #alert', function() {
            var alertBoxContent = $('#alert');
            var alertWidth = alertBoxContent.outerWidth();
            var alertHeight = alertBoxContent.outerHeight();
            var widthCombine = -((defWidth + alertWidth) / 2);
            var heightCombine = -((defHeight + alertHeight) / 2);
            modal.animate({width: alertWidth, height: alertHeight}, 200);
            outer.animate({marginLeft: widthCombine, marginTop: heightCombine}, 200, function() {
                alertBoxContent.fadeIn(200, function() {
                });
            });
        });

This appends the content of an external file come (from load) to the modal windows; but this only works for the content within tag of id=”alert”. How can I remove the role of “alert” to display the entire content of external file. For example, I want to load an external image (which is an image file and not between “alert” tag).

Answer 1

You don’t have to specify the #alert selector and it’ll load the whole page. It’s worth noting that if you don’t specify a selector, then load calls .html() and processes all the scripts before removing them. You may have some scripts running giving you unexpected results. The .load() docs