Question

我有一个带有单个CSS文件的java spring项目（~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

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

Answer 2

简单地说：

此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 ：按钮周围的容器。

更改HTML对话框的样式（CSS）

2 个答案: