“Popup” is common word for nowadays web developers. A very useful control to develop a user friendly websites. Main purpose of popup is to showing content to user on demand without redirecting them to new page and also its not good way to develop a page with big scroll bar and let user scroll up and down.

“NmpStackModalPopUp” as name stated logic behind this popup is stack. Although many nice popup available but there are many other purpose of stack popup, like when we need to show popup over popup etc and many more that I will demonstrate later. It’s a pure javascript popup so we can use with any platform but I have developed this popup mainly to use with Asp.Net

Any one can use this popup easily without much knowledge in javascript. To use this popup you only need to add one javascript file NmpStackModalPopUp.js and css file NmpStackCss.css. After adding a files you need to specify css class “NmpStackModalPopUp” to control you want to create popup like html table,div etc. once you add css class to control give it ID to access the popup. Now your popup is read to use and you can show popup simply by calling javascript function by passing control ID as parameter. E.g. <a href="javascript:ShowNmpStackModalPopUp('tblSamplePopUp');">Show Popup</a>

You can also use with iframe to load external content in popup. Simply as demonstrated in
below code snippet

<table border="0" id="tblSampleIFramePopup" class="NmpStackModalPopUp">
<tr>
<td>
<table class="AlertPopup" border="0">
<tr>
<td align="right">
<a onclick="HideNmpStackModalPopUp()">
<img src="images/icon-close.png" border="0"
style="cursor: pointer;" /></a>
</td>
</tr>
<tr>
<td>
<iframe src="innerPage.aspx" width="500px"></iframe>
</td>
</tr>
</table>
</td>
</tr>
</table>

<a href="javascript:ShowNmpStackModalPopUp('tblSampleIFramePopup');">Show IFrame Popup</a>

The best purpose of this popup is to use with Asp.Net UpdatePanel. We can develop a common loader for all AJAX request of website by adding popup in master page and calling “ShowNmpStackModalPopUp” in Ajax Init request call and hide loader by calling “HideNmpStackModalPopUp()” in End request call .

<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
function InitializeRequest(sender, args) {
ShowNmpStackModalPopUp('tblMasterCenter');
}
function EndRequest(sender, args) {
HideNmpStackModalPopUp();
}
</script>
<table id="tblMasterCenter" class="NmpStackModalPopUp" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle">
<table cellspacing="0" cellpadding="0" border="1" bgcolor="white">
<tr>
<td align="center" valign="middle">
<table width="180" height="40" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<strong style="color: #1693d8; font-size: small;">Loading Please Wait...</strong>
</td>
</tr>
<tr>
<td align="center">
<img src="images/progress_bar2.gif" style="border-width: 0px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>


You can use this popup for as many as purpose to meet your requirement with vary easy way and with not much knowledge of javacsript. You can download working sample project which demonstrate you how to use stack popup in html, aspx and master page and with iframe and UpdatePanel.

Have fun with NmpStackModalPopUp…

Last edited Feb 10, 2013 at 2:23 PM by nimesh165, version 2