修改HTML对话框的CSS样式

Question

我有一个java spring项目与一个单一的CSS文件(~1500行)。我要求在项目的一个屏幕上添加一个对话框。问题是对话框与项目风格(颜色，字体等)不匹配。

是否有任何简单的方法来改变对话框的风格，以匹配我的项目风格?

对话框:

<%@ 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" );
    });
});

提前感谢!

迈克

Answer 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:包含对话框按钮的窗格。只有当设置了buttons选项时才会出现。

ui-dialog-buttonset:按钮周围的容器。

Answer 2

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