样式 Jquery 对话框内容 div 背景混合在对话框中

Question

我正在尝试使用以下代码中的自定义 JQuery 警报框

    $.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);
    }
});

来自此处找到的帖子之一：https://stackoverflow.com/a/15372779/4755915

但我让这个对话框与页面内容混合（重叠）。 这是我得到的输出： http://postimg.org/image/s7x1nc6er/

我不确定如何向现有对话框代码添加样式标签或修改。你能否请我解决这个问题。谢谢

Answer 1

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