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. (Eg 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;
}
3 answers
solution1
4 ACCPTED 2012-02-23 12:37:59
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;
}
solution2
1 2012-02-06 13:29:56
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; }
solution3
1 2012-02-06 13:33:58
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-defaultbackground image. - Close Button: Change
.ui-widget-header .ui-icon - Background of Dialogue: Change
.ui-widget-contentbackground property.
Hope this works for you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.