CODEWITHSUNDEEP
c#webpopupwindow
Arun Singh
Arun Singh

Reputation: 1546

Alternate of Popup Window (Same functionality)

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.

But all the requirements are same.

  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.

Which is the best option for this scenario?

Thanks.

Upvotes: 0

Views: 716

Answers (2)

Arun Singh
Arun Singh

Reputation: 1546

I have found a way, as an alternate of popup window.

Style Sheet (Popup related CSS)
Purpose: CSS for popup window

.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
Purpose: Contains the Common code for popup

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>

JavaScript 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');

Upvotes: 0

walther
walther

Reputation: 13600

Your best bet is javascript, maybe modal plugin of jquery, but... The problem is, that it isn't 100% reliable as well. Many people disable javascript or maybe don't have a browser with that js (some older mobile phones etc.).

Upvotes: 1

Related Questions