2

I have a situation where the user interacts with a modal dialog and upon submitting and closing the form the site works on fetching and downloading a document from the server, which can sometimes take a while. So the effect is the dialog disappears and the normal page is displayed for several seconds. The favicon changes to a spinner, and there's a spinner next to the arrow, but I'd like to make it even more apparent that the site is still working as intended.

I've used bootstraps hidden.bs.modal trigger to call a $.blockUI which puts up a spinner. Here is some of the code.

$('#projectsiteitemsdialog').on('hidden.bs.modal', function () {
  if (isLoading) {
    doSpinner();
  }
  isLoading = false;
});

function doSpinner() {
  $.blockUI({
    message:
        $("#spinner"),
    css:
        {
            top: ($(window).height() - 30) / 2 + "px",
            left: ($(window).width() - 30) / 2 + "px",
            width: "30px"
        },
    overlayCSS:
    {
        backgroundColor: "#fff"
    }
  })
};

The effect I get is nearly as intended. BlockUI puts up the white background color, but no spinning gif shows. The gif shows for other buttons calling doSpinner on the page when there is no Bootstrap modal involved.

If I use hide.bs.modal I can see the spinner, but only for a moment before it closes along with the Bootstrap modal.

Any suggestions?

erosebe
  • 927
  • 3
  • 16
  • 31
  • To whoever else had this issue, try adding baseZ to the blockui. Like... $.blockUI({ baseZ: 2000 }) I haven't revisited this question in a long time. If that works let me know and I can make a more official answer and stuff. – erosebe Dec 18 '13 at 20:35

0 Answers0