CODEWITHSUNDEEP
jqueryhtmljquery-dialog
user3681970
user3681970

Reputation: 1271

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?

Upvotes: 1

Views: 743

Answers (1)

Tushar
Tushar

Reputation: 87203

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

Ex:

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

Upvotes: 2

Related Questions