This time I will share how to cause the same effect as the ModalPopUpExtender from the AjaxControlToolkit 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're a lot of approaches out there, so, probably nothing new... Just my way :-)
Well, if there's a ModalPopUpExtender in the AjaxControlToolkit, why not to 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 how to convert them into "PopUp Windows" and found two different ways that thought would work.
The Code and the Solution
Let's add an Update Panel. 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, wich 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 call ucPopUpUsersQuickSearch)
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 notice that the panels have their Visible attribute to false? Just change that attribute to show them or hide them, like this:
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!!
As said, this can be used in many different scenarios: Update Progress, Quick Searchs, Master Detail pages, etc. Please feel free to try and change it. If you improve it, please share it. If you want to download a sample code, it will be soon available in my corresponding article at www.codeproject.com. Search by this post title or by nereo.lopez to find it. Hope it helps!
Thanks for reading!
About Nereo Lopez
Hi, this is Nereo. I've spent my first professional years as .Net Software Engineer, and then moved more into Agile Methodologies. Anyway, I keep playing with all the new technologies that appear, and specially love Hybrid Apps!