So on the site I am working on, I need some popups. I have used Lightbox before and it works wonderfully, but I wanted to try something new this time. Since I was already knee-deep in the ASP.NET Ajax framework, I figured I might as well try their ModalPopupExtender and see how that works.

Its pretty simple to get a popup to show up, but I wanted something a little prettier than the standard format of a big rectangle. Maybe some rounded corners? As it just so happens…there is a RoundedCornersExtender in the toolkit. So I figured if I put those two together I would get one sexy popup. It wasn’t quite that simple…

In the beginning…
So if you check out the live sample of the modal popup you will get a good idea of how to build a basic example. Using this demo as a template I created this:

<div id="Div1" runat="server">Click for Modal popup 2</div>
    
<asp:Panel ID="Panel1" runat="server" 
style="display:none; height: 200px; width: 200px; background-color: #ff0000;">
   I am a popup
   <br /><br />
   <asp:Button ID="Button1" runat="server" Text="Cancel" />
   <asp:Button ID="Button2" runat="server" Text="Button" /><br />
   <br /><br /><br />
</asp:Panel>
    
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender2" runat="server" 
TargetControlID="Div1" PopupControlID="Panel1" CancelControlID="btnCancel" 
OkControlID="btnOK" BackgroundCssClass ="modalBackground" />

It ain’t pretty but it works. Lets see how it does what it does.

To launch my popup, I simply have a div that has the runat=”server” property. Nothing too special there. I could have used just about anything…links, buttons, etc…but I went the simple route for this demo.

After the div you see an asp:Panel (which is basically a div). Now I didn’t have to use the ASP.NET server control. If you wish, you can use a plain ole div. The Panel has some styling to it (again, normally I would use a seperate CSS class, but it is easier to do it inline for demos). The important element is the “display:none”. That is not optional if you want your panel to act like a popup.

Inside the panel is some text and a couple of buttons. Nothing special there really, except you need something to be your close button. Otherwise you won’t be able to get rid of the popup without refreshing the whole page.

Finally we have the ModalPopupExtender. Here is how the properties breakdown:

• TargetControlID: This is the ID of the control that will launch the popup
• PopupControlID: This is the ID of the control you want to popup
• CancelControlID: If you want a cancel button of some sort, this is the ID of the control. (optional)
• OkControlID: Your “ok” button’s ID…this guy is required to dismiss the popup.
• BackgroundCssClass: This is the CSS class that controls what the page looks like when the modal popup is active. In our case it looks like this:

  .modalBackground 
  {
     background-color:#000;
     filter:alpha(opacity=70);
     opacity:0.7;
  }

• OnOkScript: This guy is one we aren’t using in our little demo, but it basically tells the page what Javascript function to call when the ok button is called. It looks like this : OnOkScript=”onOk()”. (optional)
• OnCancelScript: This is another one we aren’t using, but it behaves the same way as the OnOkScript except it fires when the cancel button is clicked. (optional)
• PopupDragHandleControlID: If you want your model dialog to be draggable, then you can set this ID to the control you want to act as your “drag handle” (i.e. PopupDragHandleControlID=”Panel3″). (optional)

So once I had that guy up and running I was ready to put in my rounded corners. This is as simple as throwing down the extender like so:

<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" 
TargetControlID="Panel1" BorderColor="black" Radius="6" />

Here is the property breakdown:

• TargetControlID: The ID of the control you want to have rounded corners (typically a div or panel)
• BorderColor: The color of the border around the rounded edges. (optional)
• Radius: How round the corners actually are (in pixels). If you don’t put this in, the contol assumes 5. (optional)
• Corners: Which corners you want to be rounded. If you don’t put this in, then the extender assumes All. This can be None, TopLeft, TopRight, BottomRight, BottomLeft, Top, Right, Bottom, Left, or All. (optional)

Somethings not quite right…
So you would think that by putting those two together you would get a nice rounded modal popup right? Well ya get this:

Not exactly what I was looking for…yes the corners are rounded, but all my content is gone. So how do you fix this?

Making it all better
Simple, build two panels, throw in some CSS and call me in the morning.

Lets take a look at the updated code.

<div id="job1" runat="server">Click for Modal popup</div>
<br />
<asp:Panel ID="pnlPopup1" runat="server" 
CssClass="outerPopup" style="display:none;">
   <asp:Panel ID="pnlInnerPopup1" runat="server" 
   Width="300px" CssClass="innerPopup">
       Yea, look at me, I am a popup with rounded corners!!
       <br /><br />
       <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
       <asp:Button ID="btnOK" runat="server" Text="Button" /><br />
       <br /><br /><br />
   </asp:Panel>
</asp:Panel>
    
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" 
TargetControlID="job1" PopupControlID="pnlPopup1" CancelControlID="btnCancel" 
OkControlID="btnOK" BackgroundCssClass ="modalBackground" />

<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" 
TargetControlID="pnlInnerPopup1" BorderColor="black" Radius="6" />

The first difference you will notice is that our popup is now two panels…I call them outer and inner. Basically we point the ModalPopupExtender to launch the outer one (notice the display:none), and the RoundedCornersExtender is pointing to the inner panel. The other bit of magic is the CSS we are using.

.outerPopup 
{
    background-color:transparent;  
    padding:1em 6px;
}

.innerPopup
{
    background-color:#fff;
}

.modalBackground 
{
     background-color:#000;
     filter:alpha(opacity=70);
     opacity:0.7;
}code>

The modalBackground is the exact same, but now we have an innerPopup and an outerPopup class. The outerPopup is set to have a transparent background, and the inner (which will have the rounded corners) has a white one (it can be any color obviously).

What is strange is the fact that we have to put the width of the inner panel as a style in the panel rather than in our CSS class. If we don’t do that, then our inner panel loses its background and the rounded corners get funky so it is best to put that in.

However, put it all together and you get a nice modal popup with rounded corners. Go us.

Below is a pic of what it looks like when all is said and done, and if you want to get your hands dirty, you can download the little demo I made.

I hope this helps anyone else who runs into the same problem I did early on. Let me know if you end up using it on your site!