To open a jQuery Dialog on an Asp.net
button click, we need to disable the default post back events, this can be done
by adding the following line.
event.preventDefault();
Now
we will have to open the Dialog on the click event of the Asp.net button, as
follows
$(document).ready(function() {
$('#cmdHello').click(function(event)
$(document).ready(function() {
$('#cmdHello').click(function(event)
{
event.preventDefault(); // To
Prevent PostBack
$('#myDialog').dialog // Open the Div Tag
'myDialog' as Dialog
(
{
width: 150,
height: 150
}
);
}
);
});
});
<div id="myDialog"
style="display:none;" title="Hello Dialog">
Hello !!! <br /><br />
Hello !!! <br /><br />
</div>
<asp:Button ID="cmdHello" runat="server" Text="Say Hello" />
Full example code
<html xmlns="http://www.w3.org/1999/xhtml"
>
<head runat="server">
<title>jQuery
Dialog with Controls</title>
<script type="text/javascript" src="JavaScript/jquery-1.7.2.js"></script>
<script type="text/javascript" src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
<link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css"
rel="Stylesheet"
/>
<style type="text/css">
.ui-dialog
.ui-dialog-buttonpane
{
text-align:
left;
}
.ui-dialog
.ui-dialog-buttonpane .ui-dialog-buttonset
{
float:
none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#cmdHello').click(function(event) {
event.preventDefault();
$('#myDialog').dialog(
{
width: 150,
height: 150
}
);
});
});
</script>
</head>
<body>
<form id="jQueryDialog" runat="server">
<div id="myDialog" style="display:none;" title="Hello
Dialog">
Hello !!! <br /><br />
</div>
<asp:Button ID="cmdHello"
runat="server"
Text="Say
Hello" />
</form>
</body>
</html>
Run
the application, click on the Say Hello button, the Dialog will get displayed.
No comments:
Post a Comment