Style Jquery dialog content div background mixing in dialog box

Question

I am trying to using custome JQuery alert box from the below code

    $.extend({
    alert: function (message, title) {
        $("<div></div>").dialog({
            close: function (event, ui) { $(this).remove(); },
            resizable: true,
            title: title,
            show: "fade",
            hide: "fade",
            modal: true,
            buttons:
            {
                Close: function () {
                    $(this).dialog('close');
                }
            },
            open: function () {
                /* styling dialog */
                $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").remove();
                $(this).parents(".ui-dialog").css("padding", 5);
                $(this).parents(".ui-dialog").css("border", 0);
                $(this).parents(".ui-dialog:first").find(".ui-dialog-content").css("padding", 0);

                $(this).css("-webkit-box-shadow", "0px 0px 10px rgba(0, 0, 0, 0.8)");
                $(this).parents(".ui-dialog").css("-webkit-box-shadow", "0px 0px 10px rgba(0, 0, 0, 0.8)");
                $(this).parents(".ui-dialog").css("-moz-box-shadow", "0px 0px 10px rgba(0, 0, 0, 0.8)");
            }
        }).text(message);
    }
});

from one of the post found here: https://stackoverflow.com/a/15372779/4755915

But I am getting this dialog box mixing (overlapping) with the page content. Here is the output I am getting: http://postimg.org/image/s7x1nc6er/

I am not sure how to add style tags or modifications to existng dialogbox code. Could you please me in fixing this issue. Thank you

Answer 1

jQuery Ui Dialog支持设置一个或多个CSS类的选项： http : //api.jqueryui.com/dialog/#option-dialogClass