CODEWITHSUNDEEP
twitter-bootstrapjquery-ui-dialog
Ihor Shubin
Ihor Shubin

Reputation: 10726

Bootstrap fixed menu + jquery dialog issue

When I show JQuery dialog in small window, it placed to the top of page and menu closes the dialog.

$(function () {
    $('.d').dialog({
                width: '75%',
                height: 600,
                modal: true,
                draggable: false,
                resizable: false,
        position: [ "center", 100]
    });
});

See: http://snag.gy/BSJVs.jpg

Example: http://jsfiddle.net/ishubin/9ruhx/1/

How can I fix it (for example set margin-top: 100px)?

Upvotes: 1

Views: 805

Answers (1)

likeitlikeit
likeitlikeit

Reputation: 5638

You have two easy ways of dealing with this problem.

The cleaner solution: Make sure that if the dialog box is displayed, it is always on top of the menu: 

// add this to your css file

div.ui-dialog {
     z-index: 1031 !important;   
}

a working example can be found on http://jsfiddle.net/9ruhx/2/.

Otherwise, you can make sure that the dialog always opens just below the menu at the top: 

// your css file

div.ui-dialog {
     top: 45px !important;
}

see http://jsfiddle.net/9ruhx/3/.

Upvotes: 3

Related Questions