Customizing jQuery UI dialog

Question

For learning jQuery UI dialog, I have the code defined below.

I need to do following three tasks

1) Use my image as “OK” button and “Cancel” button

2) Use my custom image as the close button on right top end of dialog

3) Background of the whole dialog should be “gray” (including title, and place for OK button.)

The important point is the style should be applied only to my dialog. All other widgets should have default behavior. For content area, I could achieve it using #myDiv.ui-widget-content.

Can you please suggest code for this?

Note: Please use the best practices, if possible. (E.g. 1. use a variable $myDialog 2. use autoOpen: false)

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">
    <title> </title>

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.6/jquery-ui.js"></script>


 <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/themes/redmond/jquery-ui.css" rel="stylesheet" 
        type="text/css" />


     <link href="Styles/OverrideMyDialog.css" rel="stylesheet" 
        type="text/css" />-



<script type="text/javascript">

    $(document).ready(function () {
        var $myDialog = $(".addNewDiv").dialog(
                                    {
                                        autoOpen: false,
                                        title: 'My Title',
                                        buttons: { "OK": function () {
                                            $(this).dialog("close");
                                            ShowAlert();
                                            return true;
                                        },
                                            "Cancel": function () {
                                                $(this).dialog("close");
                                                return false;
                                            }
                                        }

                                    }
                                           );





        $('#myOpener').click(function () {
            return $myDialog.dialog('open');


        });
    });

    function ShowAlert() {
        alert('OK Pressed');
    }

</script>

<body>
    <div>
    <input id="myOpener" type="button" value="button" />
</div>
<div class="addNewDiv"  id="myDiv" title="Add new Person" >
    <table>
        <tr>
            <td>
                Name
            </td>

        </tr>
        <tr>
            <td>
                Age
            </td>

        </tr>
    </table>
</div>
</body>
</html>

Also, I made a css class to override the widget functionality only for my dialog

    /*
   *File Name: OverrideMyDialog.css
   * jQuery UI CSS is overriden here for one div
  */


/* Component containers
----------------------------------*/

#myDiv.ui-widget-content 
{ 
border: 5px solid Red;
background: Gray url(images/ui-bg_inset-hard_100_fcfdfd_1x100.png) 50% bottom repeat-x;
color: Green; 
}

Jude Duran · Accepted Answer · 2013-06-10 07:09:44Z

I have upvoted the above answer. Still dialogClass: 'myDialogCSS' was the key I was looking for.

HTML and jQuery

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-
    1.4.4.js"></script>
    <script type="text/javascript"
        src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.6/jquery-ui.js"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/themes/Sunny/jqueryui.
    css"
        rel="stylesheet" type="text/css" />
    <link href="Styles/MyStyleSheet.css"
        rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        $(document).ready(function () {
            var $myDialog = $(".addNewDiv").dialog(
            {
                modal: true,
                autoOpen: false,
                dialogClass: 'myDialogCSS',
                title: 'My Title',
                closeOnEscape: false,
                open: function(event, ui)
                {
                    //Disable OK Button
                    $(".ui-dialog-buttonpane
                        button:contains('OK')").attr("disabled", true).addClass("ui-state-disabled");
                },
                buttons: { "OK": function ()
                {
                    $(this).dialog("close");
                    ShowAlert();
                    return true;
                },
                    "Cancel": function ()
                    {
                        $(this).dialog("close");
                        return false;
                    }
                }
            }
            );
            $('#myOpener').click(function ()
            {
                return $myDialog.dialog('open');
            });
        });
        function ShowAlert() {
            alert('OK Pressed');
        }
    </script>
</head>

<body>
    <div>
        <input id="myOpener" type="button" value="button" />
    </div>
    <div class="addNewDiv" id="myDiv" title="Add new Person">
        <table>
            <tr>
                <td>Name

                </td>
            </tr>
            <tr>
                <td>Age
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

MyStyleSheet.css

   /*Title Bar*/
   .myDialogCSS .ui-dialog-titlebar
     {
       /*Hide Title Bar*/
       /*display:none; */
     }

   /*Content*/
   .myDialogCSS .ui-dialog-content
     {
       font-size:30px;
     }

Amar Palsapure · Accepted Answer · 2012-02-06 13:33:58Z

1

For this you will have to over-ride default css provided by jQuery UI (jquery.ui.theme.css).

Image for Ok button: You need to change .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default background image.
Close Button: Change .ui-widget-header .ui-icon
Background of Dialogue: Change .ui-widget-content background property.

Hope this works for you.

answered Feb 6, 2012 at 13:33

Amar Palsapure

9,6561 gold badge29 silver badges46 bronze badges

5 Comments

Amar Palsapure Over a year ago

Go to jqueryui.com/themeroller, here you can customize your theme. Download it and play with it. I also did same thing to learn. You can use Firebug (FF), Developer Tools F12 (IE), F12 Chrome to see the css applied to item. Using this tool only I have found the above elements. Hope this works.

Amar Palsapure Over a year ago

Also if you satisfied with answer, please accept it. Secondly if you need any help, post a comment.

Amar Palsapure Over a year ago

eg in my case, theme.css has this class .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default and here there is one property background with some value. You remove this value and put your own image like this url("images/yourimage.png") repeat-x scroll 50% 50% #0E6D38. Copy your image to images folder inside the theme folder. Inside theme.css search directly for the terms I have provided, and change the background property.

LCJ Over a year ago

Thanks. The important point is the style should be applied only to my dialog. All other widgets should have default behavior. For content area, I could achieve it using #myDiv.ui-widget-content. How do I achieve other requirements mentioned in the post?

Amar Palsapure Over a year ago

You can do the same stuff to others too. You can have your own custom CSS file in which you override the defaults provided by jQuery. In that case in this CSS file, you will have #myDiv.ui-widget-content, #myDiv.ui-widget-header .ui-icon etc. Also if your values donesn't reflect, put !important eg background-color: red !important.

Yorgo · Accepted Answer · 2014-03-09 14:55:54Z

1

you should customize the css file. class are:

.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative;  }
.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; } 
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }

edited Mar 9, 2014 at 14:55

answered Feb 6, 2012 at 13:29

Yorgo

2,6781 gold badge17 silver badges25 bronze badges

4 Comments

LCJ Over a year ago

Can you please provide a sample (like where to apply this and how)?

Darthg8r Over a year ago

That's for the tabs, not the dialog

Yorgo Over a year ago

you can find this in jquery-ui.css file

Amar Palsapure Over a year ago

@Lijo, check my answer. You might need to put !important if anything doesn't work.

Collectives™ on Stack Overflow

Customizing jQuery UI dialog

3 Answers 3

Comments

5 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related