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.
