Hi Friends,
In this article I will show you how to Show modal Popup
using Ajax Modal Popup Extender
Ajax introduces Modal Popup Extender for showing popup
in Asp.net Application.
Step 1: Create one Asp.net Web Application
Step 2: Add Script Manager on the Aspx Page.
|
<asp:ScriptManager
ID="ScriptManager1" runat="server">
</asp:ScriptManager>
|
Step 3: Add reference of Ajax Assembly
|
<%@ Register
Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit" TagPrefix="asp" %>
|
Step 4: Add Ajax modal popup extender on the Aspx page.
Where TargetControlId is on which control you want to show modal popup and
PopupControlID is a panel/div where you want to show some message or content on
modal popup
|
<asp:ModalPopupExtender
ID="ModalPopupExtender1"
BackgroundCssClass="ModalPopupBG" runat="server"
CancelControlID="btnCancel" OkControlID="btnDone" TargetControlID="btnAddNew"
PopupControlID="pnlpopup" Drag="true" >
</asp:ModalPopupExtender>
|
Step 5: Add some CSS for better UI Looking like
|
<style
type="text/css">
.ModalPopupBG
{
background-color: Black;
filter: alpha(opacity=10);
opacity: 0.7;
z-index: 10000;
} </style>
|
Step 6: I added one panel called “pnlpopup” and added some controls on that panel.
|
<asp:Panel ID="pnlpopup"
runat="server" BackColor="White" Height="400"
Width="500px"
Style="display:
none">
<table width="100%"
style="border: Solid 3px #D55500;
width: 100%; height: 100%"
cellpadding="0"
cellspacing="0">
<tr
style="background-color: #D55500">
<td
colspan="2" style="height: 10%; color: White;
font-weight:
bold; font-size: larger"
align="center">
User Details
</td>
</tr>
<tr>
<td align="right">
Product Name:
</td>
<td>
<asp:TextBox ID="txtname" runat="server" />
</td>
</tr>
<tr>
<td
align="right">
Product Quantity:
</td>
<td>
<asp:TextBox ID="txtqaun" runat="server" />
</td>
</tr>
<tr>
<td align="right">
Product
Rate:
</td>
<td>
<asp:TextBox ID="txtrate" runat="server" />
</td>
</tr>
<tr>
<td
align="right">
Total:
</td>
<td>
<asp:TextBox ID="txtTotal" runat="server" />
</td></tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="BtnSave" runat="server"
Text="Add" />
<asp:Button ID="btnCancel" runat="server"
Text="Cancel" />
<asp:Button ID="btnDone" runat="server"
Text="Done" />
</td>
</tr>
</table>
</asp:Panel>
|
|
Step 7: You can run this application. Now your popup will
look like
Happy
Programming!!
Don’t forget to leave your feedback and comments below!
If you have
any query mail me to Sujeet.bhujbal@gmail.com
Regards
Sujeet
Bhujbal
--------------------------------------------------------------------------------
Personal
Website :-http://sujitbhujbal.wordpress.com/
Facebook :-www.facebook.com/sujit.bhujbal
CodeProject:-http://www.codeproject.com/Members/Sujit-Bhujbal
Linkedin :-http://in.linkedin.com/in/sujitbhujbal
Stack-Exchange: http://stackexchange.com/users/469811/sujit-bhujbal
Twitter :-http://twitter.com/SujeetBhujbal
JavaTalks
:-http://www.javatalks.com/Blogger/sujit9923/
----------------------------------------------------------------------------------
No comments:
Post a Comment