Fixing when a jQuery UI Modal Shows Behind Fixed Bootstrap Navigation

I am blogging this because I searched stack overflow and Google and no one had the answer. Too bad I can’t just state something in StackOverflow after hours of research and a bunch of “close” questions and answers. But ah well – here it is.

I am working on my Tsugi OER site www.pr4e.com.

What I am trying to do is use the modal capabilities of jQueryUI modal dialogs (mostly because I do not like the overblown markup of BootStrap modals) while the rest of the site is styled with BootStrap. All goes well until the modal is larger than the overall window vertically and the modal slides under the BootStrap fixed navigation bar.

Here are some images:

Navigation with enough vertical space (good): good_nav

Not enough vertical space, modal slides below the navigation (bad):bad_nav

Not enough vertical space, modal atop the navigation (good): better_nav

Solution

The key is to set the z-index of the *generated* markup created by the jQuery UI dialog call after the dialog was created:

function showModal(title, modalId) {
    console.log("showModal "+modalId);
    $("#"+modalId).dialog({
        title: title,
        width: modalDialogWidth(),
        position: { my: "center top+30px", at: "center top+30px", of: window },
        modal: true,
        draggable: false
    });

    // In order to float above the BootStrap navigation
    $('.ui-dialog').css('z-index',9999);

    $(window).resize(function() {
        $("#"+modalId).dialog("option", "width", modalDialogWidth());
    });
}

I figured out the generated elements and changed their z-index.

Working code: www.py4e.com (Log in and go to “Use this service”, and press “Using Your Key”).

Code in github: tsugiscripts.js