更改 HTML 对话框的样式 (CSS)答案

【问题标题】：Change style (CSS) of HTML dialog box更改 HTML 对话框的样式 (CSS)
【发布时间】：2014-10-15 05:12:06
【问题描述】：

我有一个带有单个 CSS 文件（约 1500 行）的 java spring 项目。我要求在项目的其中一个屏幕上添加一个对话框。问题是对话框与项目风格（颜色、字体等）不匹配。

有没有什么简单的方法可以改变对话框的样式来匹配我的项目风格？

我的对话框：

<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="irw" tagdir="/WEB-INF/tags" %>

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

<script type="text/javascript">
$(document).ready(function(){
    var dialog_t = '<div id="register_confirm">bla bla</div>';
     //real code has checkboxs'

    $( dialog_t ).dialog({ 
            autoOpen: false, 
            width:1000,
            height: 500, 
            modal: true,
            open: function( event, ui ) {
                    $("#confirmation_failed").hide();
                },
            buttons: [{
                    text: "Continue to form",
                    click: function() {
                    var confirmed = verifyAllConfirmationCheckboxAreChecked();
                    if(confirmed == true){
                       $("#registerConfirmation").attr("value", "CONFIRMED");
                       $( this ).dialog( "close" );
                       $( "form" ).submit();
                    }else {
                       $("#confirmation_failed").show();
                       $("#registerConfirmation").attr("value", "");
                    }
                }
            }
    });
    $( ".register" ).click(function() {
        $("#register_confirm").dialog( "open" );
    });
});

提前致谢！

迈克

【问题讨论】：

你读过documentation吗？查看主题部分。
样式不匹配是什么意思？它是否使用其他 css 样式表不匹配？如果它使用相同的样式，它应该实际上匹配样式。

标签： java jquery css styles dialog

【解决方案1】：

简单地说：

这个css会设置对话框内容的样式

.ui-dialog, .ui-dialog-content {
border:10px solid orange;   /** change css properties to match your theme*/
background-color: pink !important;
color: red;
}

这个css会为对话框的标题栏设置样式

.ui-dialog-titlebar {
background-image: none;  /** change css properties to match your theme*/
 background-color: yellow;
}

这个 CSS 将设置对话框底部窗格的样式

.ui-dialog .ui-dialog-buttonpane{} /** change css properties to match your theme*/

另外为了您的信息，这是来自http://api.jqueryui.com/dialog/的插入

可以使用 CSS 类名：

ui-dialog：对话框的外层容器。

ui-dialog-titlebar：包含对话框标题和关闭按钮的标题栏。

ui-dialog-title：对话框文本标题周围的容器。

ui-dialog-titlebar-close：对话框的关闭按钮。

ui-dialog-content：对话框内容周围的容器。这也是小部件被实例化的元素。

ui-dialog-buttonpane：包含对话框按钮的窗格。这只有在设置了按钮选项时才会出现。

ui-dialog-buttonset：按钮本身周围的容器。

【讨论】：

嗨，它似乎影响了对话框，但不像预期的那样。现在粉红色的背景。标题标题仍为灰色，按钮字段（整行）为白色。我没有看到任何黄色。谢谢

【解决方案2】：

您可以只使用 jQuery UI 的 ThemeRoller，然后将生成的 css 文件包含在您的标题中。 jQuery ThemeRoller Link

【讨论】：