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

ModalPopup extender
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?”


About these ads

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

  1. TravisP Says:

    Ivan,

    What if you wanted your TargetControlID to point to a LinkButton within GridView? I have tried to set an ID on the link button and although I can put an ID on it, the ModalPopUpExtender cannot find it.

    This is because I have a GridView that I want to be able to select an entry on the list to open the Modal Box.

    Thanks

  2. Bhavani Says:

    It is very nice. Bit I want to open popup control from Gridview Item template.

  3. Bhavani Says:

    I have a Gridview that I want to be able to select an entry on the list to open Medel popup

  4. anr Says:

    I tried a grdiview with data on a model popup . This gridview has a select link button.
    The modelpopup is triggered by clicking a link button on the parent page. The model popoup dissappears when I click the select linkbutton in the gridview. Any idea why this happens?

  5. subba Says:

    ModalPopup Extener causing data bound controls to disappear?
    Please help me to resolve this issue

  6. graueEminenz Says:

    sorry about my english – it isn’t my native language.

    i open the popup out of a gridview in c# with popupname.show();

  7. shantanu Says:

    Hi it is really very good example. please provide me complete code.

    Thanks,
    Shantanu.

  8. Charanpreet Says:

    I tried a grdiview with data on a model popup . This gridview has a select link button.
    The modelpopup is triggered by clicking a link button on the parent page. The model popoup dissappears when I click the select linkbutton in the gridview. Any idea why this happens?

  9. Useful AJAX Links | pc-aras Says:

    [...] Sliding Task Lists project (day 3) — Using ModalPopup extender to create panels for adding new… (Coding [...]

  10. steroids Says:

    Good work , keep us posting , your a very good writer…

  11. steroids pharmacy Says:

    This is really interesting, You’re a very skilled blogger. I’ve joined your feed and look forward to seeking more of your wonderful post.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: