jquery - 如何为 jquery 对话框应用背景色 css

Question

我在运行时形成一些羊肚菌弹出，如下所示，但我想应用背景颜色 css 如何应用它？

$("<div></div>")
                .addClass("dialog1")
                .attr("id", $(this).attr("id"))
                .appendTo("body")
               // .addCss("background-color","red")
                .dialog({
                    title: $(this).attr("data-dialog-title"),
                    close: function () { $(this).remove() },
                    width: $(this).attr("data-dialog-width"),
                    modal: true,
                    position: 'center',
                    resizable: $(this).attr("data-dialog-resizable")
                }).load(url);

                $(".close").live("click", function (e) {
                    e.preventDefault();
                    // $(this).dialog('destroy').remove();
                    $(this).closest(".dialog1").dialog("close");
                });

Answer 1

您可以使用css()代替addCss：

.css("background-color","red")

以及live()已弃用，您应该使用on()代替

Answer 2

利用.css()

 $("<div></div>")
            .addClass("dialog1")
            .attr("id", $(this).attr("id"))
            .appendTo("body")
            .css("background-color","red")
            .dialog({
                title: $(this).attr("data-dialog-title"),
                close: function () { $(this).remove() },
                width: $(this).attr("data-dialog-width"),
                modal: true,
                position: 'center',
                resizable: $(this).attr("data-dialog-resizable")
            }).load(url);

并使用on()而不是live()

            $(".close").on("click", function (e) {
                e.preventDefault();
                // $(this).dialog('destroy').remove();
                $(this).closest(".dialog1").dialog("close");
            });

委托它，如果你将它附加到动态生成的元素..

    $(document).on("click",".close", function (e) { //<--closest static element rather than document
                e.preventDefault();
                // $(this).dialog('destroy').remove();
                $(this).closest(".dialog1").dialog("close");
            });

Answer 3

请考虑使用以下代码：

$("<div></div>")
    .addClass("dialog1")
    .attr("id", $(this).attr("id"))
    .appendTo("body")
    .css("background-color","red")
    .dialog({
            ...

重要的是.css("background-color", "red")线路。

Answer 4

您可以对 CSS 本身进行更改

例如.ui-dialog {background:yellow}

Answer 5

最简单的方法是覆盖 jquery 对话框背景属性，如下所示

.ui-dialog .ui-dialog-content {
        background: red;
    }