Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery - How to Display Popup Window on Button Click in Asp.net

May 12, 2014
Introduction

Here I will explain how to display popup window on button click in
asp.net using jQuery ui modal popup window or open jQuery modal popup window on button click in asp.net.

Description:
  
In previous articles I explained
jquery show popup window during pageload, jquery simple modal popup window example, jQuery show alert message while leaving from website, jQuery enable / disable controls on page, jQuery Countdown timer script example and many articles relating to JQuery and asp.net. Now I will explain how to display popup window on button click in asp.net using jQuery ui modal popup window.

To show popup window on button click we need to write the code like as shown below


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Show Modal Popup from code behind or server side</title>
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$('#<%=btnclick.ClientID%>').click(function() {
$("#popupdiv").dialog({
title: "jQuery Popup from Server Side",
width: 430,
height: 250,
modal: true,
buttons: {
Close: function() {
$(this).dialog('close');
}
}
});
return false;
});
})

</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="popupdiv" title="Basic modal dialog" style="display: none">
<b> Welcome to Aspdotnet-Suresh.com</b>
</div>
<table align="center" style="margin-top:200px">
<tr>
<td>
<asp:Button ID="btnclick" runat="server" Text="Show Modal Popup" />
</td>
</tr>
</table>

</div>
</form>
</body>
</html>
Demo





If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

0 comments :

Give your Valuable Comments

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.