So I am trying to create a modal window that displays dynamically loaded content. I will do this using AJAX... however I've noticed on some people's modal windows they display a small loading animation prior to displaying the content.

Does anyone know how this effect is achieved?

2 answers

danwellman 5600
0
points

Is the markup for the modal window hardcoded into the page and populated/shown when the ajax call is made? Or is the whole thing created dynamically following a successful request?

If it's hard-coded, just put an animated loader gif in the div (or whatever) and then when you insert the ajax content, remove the gif.

So the process wil go something like:

  1. show popup window (containing loading gif)
  2. Make ajax request
  3. on success remove loading gif and insert content

Code-wise something like this should roughly work:

$("#trigger").click(function() {
    $("#modal").show(function() {
        $.ajax({
            url: a_url,
            success: function(data) {
                $("#loader").remove();
                $("<div></div>", {
                    text: data
                }).appendTo("#modal");
           }
       });
    });
});

Obviously I don't know the data structure the ajax request will contain, or how/when it will be shown so this may be a much-simplified example...

If everything is created dynamically you just need to create the loading gif when you create/show the modal, then remove it when the content is inserted, something like:

$("#trigger").click(function() {
    $("<div></div>", {
        id: "modal",
        html: "<img id="loader" src="loader.gif">
    }).appendTo("body").show(function() {
        $.ajax({
            url: a_url,
            success: function(data) {
                $("#loader").remove();
                $("<div></div>", {
                  text: data,
                  id: "content"
                }).appendTo("#modal");
            }
        });
    });
});
Answered over 6 years ago by danwellman
0
points

I use Fancybox, it has that effect. If you'd rather not reinvent the wheel, I'd recommend it. Fancybox site

Answered over 6 years ago by ??????? ??????