Search code examples
jqueryiframespinnerloadingsimplemodal

using simplemodal, show loading spinner while content inside iframe loads

Good morning!

I am using the great SimpleModal plugin for jQuery from Eric Martin. Currently, I am loading a modal using an iframe to load my requested pages which works as expected. What I would like to implement is a Loading... spinner which displays while the content is loading.

I am loading my modal as follows:

jQuery(function ($) {
    // Load dialog on click
    $('.basic').click(function (e) {
        var src = "http://localhost" + $(this).attr("href");
        $.modal('<iframe id="details" class="so" src="' + src + '" height="500"     width="500" style="border:0">', {
            closeHTML: "<a title='Close' class='modalCloseImg simplemodal-close'></a>",
            containerId: "simplemodal-container",
            overlayId: "simplemodal-overlay",
            overlayClose: true
        });

        return false;
    });
});

I have a background image set for my modal-container, which displays right away. I would definitely prefer to show a loading spinner here as well.

Solution

  • I was able to solve this by inserting a loading div inside of the simplemodal source and then calling show/hide as needed from my code.