jQuery Forum

Hi Jake :),

Sorry if I can't provide a JSFiddle but it doesn't accept HTML injection in the document and that's the point here.  I show a JQuery UI Dialog and in this dialog I have a button to seek data on the server but I have to show a busy indicator which I create dynamically and inject into the dom which in theory goes at the end of the stack.

The problem is that this busy indicator is shown behind the dialog.  Now here's what I already tried.

1) Set zIndex of the JQuery dialog ...}).zIndex(100);
2) The busy indicator has a z-index of 38500

Any ideas ?

Here's the code of the dialog followed by the code that creates the busy indicator :

1. $('#TakesDialog').dialog({
       modal: true,
       opacity: .75,
       width: window.innerWidth - 80,
       height: window.innerHeight - 80,
       draggable: false,
       resizable: false,
       show: 'fade',
       hide: 'fade',
       showAnim: 'slow',
       title: (IsFrench ? 'Prises pour ' : 'Takes for ') + PatientName.toCapitalize(),
       closeOnEscape: true,
       position: { my: 'center', at: 'center', of: window },
       dialogClass: 'dialogWithDropShadow',
       buttons: { "OK": function () { $(this).dialog("close"); } },
       open: function () {
           $('.ui-widget-overlay').hide().fadeIn('fast');
       },
       close: function (event, ui) {
           $('#TakesDialog').empty();
           $('#TakesDialog').dialog('destroy');
       },
       closeText: 'Fermer'
   }).zIndex(100);

1. function ShowBusyIndicator(Text, showOverlay, IsTextWhite, Container)
   {
       document.body.style.cursor = 'wait';
2.     if (SelectedLanguage != null && Text == null) {
           if (SelectedLanguage == 0)
               Text = "Un instant s.v.p...";
3.         if (SelectedLanguage == 1)
               Text = "One moment please";
4.         if (SelectedLanguage == 0)
               Text = "Un momento por favor";
       }
       else
           Text == null ? Text : "Un instant s.v.p / One moment please / Un momento porfavor";
5.     showOverlay = typeof showOverlay !== 'undefined' ? showOverlay : true;
6.     if (Text == null)
           Text = "";
7.     var HTMLMessage = '<div id="BusyIndicator" style="z-index:38500">' +
                         '    <div id="BusyOverlay" style="position:absolute;left:0;top:0;bottom:0;right:0;background:black;opacity: 0.88;"></div>' +
                         '    <div id="BusyContent" style="position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;">' +
                         '        <table id="MessageLayout" style="top:50%;text-align:center">' +
                         '            <tr>' +
                         '                <td>' +
                         '                    <img width="100" height="100" src="../Images/Busy.gif" />' +
                         '                </td>' +
                         '            </tr>' +
                         '            <tr>' +
                         '                <td>' +
                         '                    <a id="BusyText" style="color:' + (showOverlay ? "white" : (IsTextWhite != null ? (IsTextWhite ? "white" : "white") : "white")) + ';font-size:18px">Un instant s.v.p...</a>' +
                         '                </td>' +
                         '            </tr>' +
                         '        </table>' +
                         '    </div>' +
                         '</div>';
8.     if (Container != null)
           $(Container).append(HTMLMessage);
       else
           $('body').append(HTMLMessage);
9.     $('#BusyText').text(Text);
10.     if (showOverlay)
            $('#BusyOverlay').css('opacity', 0.8);
        else
            $('#BusyOverlay').css('opacity', 0);
    }