Sliding Task Lists project (day 3) – using ModalPopup extender to create panels for adding new tasks

For people that read this blog for some time now, you may remember the post “Darken the page and set focus on the user input”. Ok here is a better/quicker solution and it’s called ModalPopup extender. Like the saying goes: live and learn!

Today, I’ve added panels (only the UI, the save button is not functional yet) that open when user chooses to add a task to one of the lists. Since, the application is designed to have three different categories of tasks (big, quick and everyday) I have three link buttons (“Add Big Task”, “Add Quick Task” and “Add Everyday Task”).

The code for link buttons looks like this:

OPEN CODE IN NEW WINDOW

Next thing I’ve done is added three panels, each representing my modal popup window, where I’ll let users enter the task. One panel holds the modal popup for “Big Tasks”, one for “Quick Tasks” and one of course for the “Everyday Tasks”. You’ll notice I’ve wrapped the code inside the panel in UpdatePanel control, so that I can later perform saving to database without a full postback. The code for these three panels looks like this:

OPEN CODE IN NEW WINDOW

The last thing I’ve done today was adding the ModalPopupExtender, so that I can convert those panels into modal popup windows. Take a look at the code first and I’ll explain then the ModalPopupProperties for the first panel:

OPEN CODE IN NEW WINDOW

TargetControlId property determines which control will fire up the modal popup. In my case those are the link buttons I’ve added at the top in the action bar. Next property is PopupControlID. This property indicates which control will act as modal popup window. In my case those are the three panels. Next property is the BackgroundCssClass, which is really interesting feature. It lets you set the css class for the whole background screen behind your popup. Keep reading, because I’ll show you the CSS I’ve used to make background blurred and transparent. Next property is OkControlID. This is simply the id of the control that represents confirmation or ok (hehe) button of your popup. You’ll notice I have a save button in each of the panels, and those are my OkControls. Following control is cancel control and similar to the ok control, this one represents cancellation (closes popup with no actions/consequences).

Now we are only left with the css and few tricks there. First of all, here is the css for the transparent blurred background (remember the BackgroundCssClass property we set to modal_bg) :

OPEN CODE IN NEW WINDOW

You need to use filter and opacity properties both, because one works in IE and not in FF and vice versa. However the 70 and 0.7 both represent 70% transparency.

And finally the last thing. I’ve noticed that I need to set to my panels position:absolute, otherwise they all show when page loads. Try leaving that out and you’ll see what I mean.

OPEN CODE IN NEW WINDOW

The working (take that working with reserve. Only the things explained on this blog are working.) application can be found here :

http://www.reblogger.com/lab/STL

Tomorrow we’ll create the database tables and add code for adding/saving new tasks, so drop by if you get a chance.

---

This blog is being delivered to you by
reBlogger.com
“Do you know what your employees are blogging about?”

---