Total Pageviews

Wednesday 20 June 2012

Popup Window in .Net

I am working on a website (C#, .Net 3.5 Framework) and looking for an alternate of Popup window to avoid the popup blocker settings of browsers or in other words want to remove the dependency of popup blocker for Website. Many users disable them because they don't like it.

I am using Master page for Menus and common interface of website.

All the requirements are same as popup window.
  1. Overlapped window
  2. Common Interface/component that can be used to display the content of other HTML/ASPX page
  3. Value can be passed and returned to the Opener Window.
Solution:

Style Sheet (Popup related CSS)
.PopupOuterDiv
{
height:100%;
width:100%;
top:0px;
left:0px;
background-color:#000000;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
z-index:50;
}

.PopupInnerDiv
{
position:fixed;
background-color:#ffffff;
z-index:50;
left:25%;
right:25%;
top:25%;
border-right: #0066ff 5px solid;
border-top: #0066ff 5px solid;
border-left: #0066ff 5px solid;
border-bottom: #0066ff 5px solid;
font-family: Arial;
}

.PopoupTitle
{
background-color: #0066ff;
height:25px;
color: white;
}

.PopoupButton
{
color: #ffffff;
width:20px;
border:white 1px solid;
background-color: #663300;
}


Master Page 

1. Create 1 Div for Outer faded Effect
2. Create Div as container or popup Window
3. Create Iframe inside a container DIV and assign the URL.

 <div class="PopupOuterDiv" runat="server" id="PopupOuterDiv" style="display:none;"></div>
    <div class="PopupInnerDiv" runat="server" id="PopupInnerDiv" style="display:none;">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr class="PopoupTitle">
            <td id="PopoupTitle"></td>
            <td align="right">
                <input class="PopoupButton" type="Button" value="X" onclick="closePopup();" />
            </td>
        </tr>
        <tr style="height:8px;" ><td></td></tr>        
        <tr>
            <td colspan="2">&nbsp;
            <iframe id="PopupIframe" src="" runat="server" height="300px" width="480px"></iframe> 
            </td>
        </tr>
    </table>
    </div>

JS to open and close the Popup
   function closePopup()
  {
    document.getElementById('<%=PopupOuterDiv.ClientID%>').style.display = 'none';
    document.getElementById('<%=PopupInnerDiv.ClientID%>').style.display = 'none';
  }
 
  function openPopup(PopupTitle, PopupURL)
  {
    document.getElementById('<%=PopupOuterDiv.ClientID%>').style.display = '';
    document.getElementById('<%=PopupInnerDiv.ClientID%>').style.display = '';
    document.getElementById('PopoupTitle').innerText = PopupTitle;    
    document.getElementById('<%=PopupIframe.ClientID%>').src = PopupURL;    
  }
Content Page

Call the popup window from any content page.
openPopup('My Custom Popup', '../aspx/User.aspx');