Click here to Skip to main content
Click here to Skip to main content
Go to top

Modal Popup Overlay

, 13 Jun 2011
Rate this:
Please Sign up or sign in to vote.
How to create a modal popup with overlay.

Introduction

In this article, I will share how to cause the same effect as the ModalPopUpExtender from the AJAX Control Toolkit in ASP.NET using CSS and AJAX. We'll be able to create Master/Details, LookUps, Error Messages, or whatever other use you want to give it! There are a lot of approaches out there, so probably nothing new... Just my way of doing it Smile | :)

Background

Well, if there's a ModalPopUpExtender in the AJAX Control Toolkit, why not use it and do something different? My scenario was such a pain for that. Let me explain:

I have Master Pages, Web Pages, Content Holders, and User Controls. User Controls are loaded dynamically when used as "popups". I started to search on how to convert them into "popup windows" and found two different ways that thought would work.

The first try: ModalPopUpExtender. I prepared everything: CSS background class, PopUpPanel, OkControl, CancelControl, etc. It looked great... but... whenever I clicked or used any control that would cause a postback, the popup hid. Well, there's a workaround for that using JavaScript to prevent the control itself from causing a postback, or we could try to reset the "state" (hidden or shown) of the popup after the postback... Too much work for me. If you remember, I'm dynamically loading usercontrols into the PopUpPanel... so I decided to use the second option.

The second try: Well, the second try was using simple HTML and CSS. I found an example where with two Divs and CSS, it could be achieved. It looked familiar for me because that's the way sometimes I show an UpdateProgress as a modal popup overlaying the page... How couldn't I think of it before? Well, in this case, it needed a little more than that, a JavaScript function that would show and hide the Divs when needed. So, I started to try to call the JavaScript function from code in different ways but due to my scenario (UserControls inside Panels inside UpdatePanels inside ContentHolders in a WebPage inside a MasterPage), I faced an error from the server trying to parse the request. So, as I was not able to change that structure to avoid the error, I thought using AJAX would probably work with some changes, and that's what I did.

The code and the solution

Let's add an UpdatePanel, at the end of our HTML (of course, inside the content tag). Now, in the UpdatePanel ContentTemplate, we'll just add two panels, one for the overlay and one for the popup.

The second panel (panelPopUpPanel in the example below) has a nested panel, which I use to create the "Title" bar. In the sample below, it just contains the "Close" button. After this nested panel (still inside the PopUpPanel), add whatever you want to display there (in the sample below, it contains a User Control called ucPopUpUsersQuickSearch).

<asp:updatepanel id="upPopUps" runat="server" updatemode="Always">
    <contenttemplate>
    <asp:panel id="panelOverlay" runat="server" 
           class="Overlay" visible="false">

    <asp:panel id="panelPopUpPanel" runat="server" 
              class="PopUpPanel" visible="false">
        <asp:panel id="panelPopUpTitle" runat="server" 
                   style="width: 100%; height: 20px; text-align: right; ">
            <asp:imagebutton id="cmdClosePopUp" 
               runat="server" imageurl="~/Images/Close.png">
        </asp:imagebutton></asp:panel>
        <uc:usersquicksearch id="ucPopUpUsersQuickSearch" 
                runat="server" visible="false">
    </uc:usersquicksearch> </asp:panel>
    </asp:panel></contenttemplate>
</asp:updatepanel>

Notice that both panels (overlay and popup) have the Class attribute set. Here is the CSS to give the OverlayPanel an overlay effect and to give the PopUpPanel the position and size and border and whatever you want to specify for it. Play with it to change the appearance in a way you like it.

.Overlay { 
  position:fixed; 
  top:0px; 
  bottom:0px; 
  left:0px; 
  right:0px; 
  overflow:hidden; 
  padding:0; 
  margin:0; 
  background-color:#000;  
  filter:alpha(opacity=50); 
  opacity:0.5; 
  z-index:1000;
}
 
.PopUpPanel {  
  position:absolute;
  background-color: #737373;   
  top:100px;
  left:15%;
  z-index:2001; 
  padding:10px;
  min-width:400px;
  max-width:600px;
    
  -moz-box-shadow:3.5px 4px 5px #000000;
  -webkit-box-shadow:3.5px 4px 5px #000000;
  box-shadow:3.5px 4px 5px #000000;

  border-radius:5px;
  -moz-border-radiux:5px;
  -webkit-border-radiux:5px;

 border: 1px solid #CCCCCC;
}

Notice the overlay position. It is set to "fixed". Why? If you have a large page that needs scrolling, with "fixed", you will overlay all the page even if scrolling.

So, how do we show the pop up? Have you noticed that the panels have their Visible attribute set to false? Just change that attribute to show them or hide them, like this:

Private Sub showPopUp(b As Boolean)
  panelOverlay.Visible = b
  panelPopUpPanel.Visible = b
End Sub

That was just a function that receives a boolean parameter (true or false) and sets the Visible attribute of the panels to the value of the parameter received.

And that's it. Easy, huh? Here is how it looks:

Final comments

As said, this can be used in many different scenarios: Update Progress, Quick Searches, Master Detail pages, etc. Please feel free to try and change it. If you improve it, please share it. If you want to download the sample code, it is available at the top of this article. You can also read the original article in my blog. Hope it helps!

Thanks for reading!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

nereo.lopez
Team Leader
Spain Spain
No Biography provided
Follow on   Twitter

Comments and Discussions

 
QuestionThank you! PinmemberMember 1042542226-Nov-13 13:44 
AnswerRe: Thank you! Pinmembernereo.lopez6-Jun-14 2:56 
QuestionPage Scrolling PinmemberSpike91118-Sep-13 0:57 
GeneralMy vote of 4 Pinmemberdiego.gu20-Aug-13 21:42 
GeneralMy vote of 5 Pinmemberraj ch26-Jul-13 1:04 
QuestionUsing this great piece of code in normal html/css PinmemberSorenDalby10-Sep-12 6:03 
QuestionOne small issue PinmemberMember 45054738-Jun-12 7:52 
GeneralMy vote of 5 PinmemberSorenDalby23-Nov-11 8:36 
GeneralMy vote of 4 PinmemberJobless Creature16-Jun-11 1:50 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140922.1 | Last Updated 14 Jun 2011
Article Copyright 2011 by nereo.lopez
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid