Search code examples
jqueryhtmljquery-dialog

jquery dialog box overlapping with page contents

I have a jquery dialog box in my account page. When the dialog box is coming it is overlapping with the page contents. Please see the image here.

http://s7.postimg.org/dxsg3u417/Capture.png.

The code for dialog box is :

$('<div id="ratingloaderDiv"></div>').load("ratingDialog.jsp?id=" + id, function () {
    rateDialog = $(this).dialog({
        autoOpen: true,
        minHeight: 275,
        width: 400,
        height: 350,
        modal: true,
        open: function (event, ui) {
            var rating = 0;
            $('.rateCls' + id).rating({
                callback: function (value, link) {
                    rating = value;
                }
            });
            //more code goes.

Can anyone please suggest how to avoid overlapping with the page contents?

Solution

  • Increase the z-index of dialog box above the z-index of other content.

    Ex:

    body {
    z-index: 100;
}
.dialog {
    z-index: 101;
}