CODEWITHSUNDEEP
javajquerycssstylesdialog
Mike
Mike

Reputation: 1139

Change style (CSS) of HTML dialog box

I have a java spring project with a single CSS file (~1500 rows). I asked to add a dialog box to one of the project's screens. The problem is that the dialog box doesn't match the project style (colors, fonts, etc...).

Is there any simple way to change the style of the dialog box to match my project style?

My dialog box:

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

Thanks in advance!

Mike

Upvotes: 1

Views: 5416

Answers (2)

YoungStacker
YoungStacker

Reputation: 308

Simply put:

This css will style dialog box content

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

This css will style the title bar of dialog box

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

This css will style bottom pane of dialog box

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

Also for your info this is insert from http://api.jqueryui.com/dialog/

CSS class names can be used:

ui-dialog: The outer container of the dialog.

ui-dialog-titlebar: The title bar containing the dialog's title and close button.

ui-dialog-title: The container around the textual title of the dialog.

ui-dialog-titlebar-close: The dialog's close button.

ui-dialog-content: The container around the dialog's content. This is also the element the widget was instantiated with.

ui-dialog-buttonpane: The pane that contains the dialog's buttons. This will only be present if the buttons option is set.

ui-dialog-buttonset: The container around the buttons themselves.

Upvotes: 1

ChrisM
ChrisM

Reputation: 91

You could just use jQuery UI's ThemeRoller and then include the generated css file in your header. jQuery ThemeRoller Link

Upvotes: 1

Related Questions