ModalPopup with Multiple Cancel Buttons

I recently stumbled across the following post.  In the entry, the author describes a simple modal popup he has created for his hotel reservation ASP.NET AJAX web application.  While developing the popup control, he ran into a problem when trying to include both a 'Close' button at the bottom of the dialog as well as a close 'X' button in the top right corner:

I ran into a bit of a stumbling block because I wanted to have multiple buttons close the popup.  I had the OK button and the cancel button centered and vertically aligned at the bottom of the window, but I also wanted a cancel button in the top right  (ie "Cancel [X]") - with the familiar [X] that we know and love for closing something.  The problem is, I couldn't figure out how to assign more than one control to the CancelControlID. 

Live Demo | Download

[Update 10/3/2007]: As Koen points out, the sample modal dialog doesn't look as nice in IE6 (it looks fine in FF and IE7)

Thankfully Dave found a solution that he found to be workable.  He wrapped the MoalPopupExtender in an UpdatePanel and explicitly called the Hide method from the server side button event handler.  It sounds like this approach has worked him, but I thought I would provide a quick example of how you can dismiss the dialog without roundtripping to the web server.

To close the popup without having to leave the client, all you have to do is call the hide function of the ModalPopup's client-side JavaScript behavior.  Here is a quick example of the easiest way to accomplish this.  Below is the markup for a modal popup that contains a message, an OK button and 6 Cancel buttons.  Notice the two area's outlined in red.  In the first outlined area I assigned the BehaviorID attribute of the ModalPopupExtender to a unique id ('mdlPopup' in this example).  Then, in the OnClientClick of each of my Cancel buttons I pass this BehaviorID to the ASP.NET AJAX $find JavaScript shortcut function.  The $find function will fetch the JavaScript behavior for the modal popup.  Once I have a reference to the popup's behavior I invoke the hide function - which will hide my dialog. 

 

There are a few things to note about this example:

  1. After calling the hide function, I return false to avoid the post back
  2. BehaviorID's do not have naming container information added to them, so it is safe to use the assigned ID directly from your JavaScript code
  3. A similar technique could be used for multiple OK buttons
  4. You would probably want to move the OnClientClick JavaScript into it's own function
  5. I have set the display style attribute value to none on the Panel to avoid that initial popup flicker

While I think the above sample shows this technique pretty well, I thought it might be nice to actually implement a dialog similar to the one Dave had originally described.  I use technorati quite regularly and I happen to like their sign-in dialog.  It is simple and professional.

So I used this design for a delete confirm dialog (live demo) ...

The markup for this control is almost identical to the above sample, except it only uses 2 cancel buttons instead of 6.  All of the real work is handled by the stylesheet.  As usual, all of the code for this sample can be downloaded.

 

 That's it.  Enjoy!


TrackBack

TrackBack URL for this entry:
http://mattberseth.com/blog-mt/mt-tb.fcgi/72

Listed below are links to weblogs that reference ModalPopup with Multiple Cancel Buttons:

» Matt Berseth shows ModalPopup with from Usability, Ajax, ASP.NET
Matt Berseth shows ModalPopup with Multiple Cancel Buttons [Read More]

» Matt Berseth shows ModalPopup with from Usability, Ajax, ASP.NET
Matt Berseth shows ModalPopup with Multiple Cancel Buttons [Read More]

Comments


Posted by: Koen on October 3, 2007 12:00 AM

Too bad it looks like sh*t in Internet Explorer 6 :o(

Posted by: Michael Starke on October 3, 2007 12:00 AM

Matt, though this might seem useful in certain circumstances, it disturbs me that there isnt a better solution.

That is to say, since youve abandonned OKControlID or CancelControlID (whichever the case may be) youre giving up on the corresponding OnOKScript or OnCancelScript that you get for free by using the extender in its intended manner.

Now I know that this limitation of the extender is a consequence of the *ControlID properties having the IDReferenceProperty addornment, but it seems that there ought to be a mechanism for specifying multiple control IDs to fulfil a specific task, no?

@Michael -

I agree 100%, having 2 cancel/close buttons seems like it would be scenario #1 when creating a dialog box. I am surprised there isnt a less clumsy way to do it than what I have shown (if someone knows of a better solution please post it!).

Matt.

Posted by: Michael Starke on October 3, 2007 12:00 AM

Matt,

I spent a bit of time digging deeper into the whole IDReferencePropertyAttribute and how its used in the toolkit, it appears that verifying that the value passed into the property addorned with the attribute is left up to the extender developer.

That said, I cannot see any reason why you couldnt author your own extender, copy/pasting the modal dialog extender, and altering it to split the *ControlID properties along some delimeter, say commas...

Doing so should require only changing a few lines in the initialize/dispose methods in the client script, and you should be able to achieve the desired results, and maintain the On*Script functionality.

Unfortunately the TargetControlID cannot be altered in such a manner since the evaluation of it is handled in the bowels of ASP.Net AJAX. This puts a damper on the idea of multi-target extenders. Though with how behaviors exist on the client side as simple in-memory objects, I dont sweat that overhead too much.

Ill self plug here, Im working up a blog series on this problem, and this one covers an alternate approach, abliet, not a production ready one.

Posted by: Gokhan Demir on October 8, 2007 12:00 AM

great post ! i just love the live demo feature of your posts.

this works like a charm with minor modifications. Thanks a lot.

One issue I might have is that the form is closing even if the fields on the panel do not validate, meaning the users wont see that nothing happenned.

anyway, thanks again.

@Jonx -

Would you mind sharing your modifications?

Matt.

This script works perfect and is easy to use.

On this site i have found more of this script and the marker, mabey it is handy for you.

http://www.script.ajaxflakes.com

startoy

Hi Matt, How do we configure delete button from DataList (Datalist is a container) with Modal Popup Extender? Please let me know

Posted by: Charan on November 13, 2007 12:00 AM

Thanks for this tip Matt. I was also having the multiple Cancel issue with the modalpopup I use. Your blog answered my question.

Thank you once again.

Posted by: Anosh on December 20, 2007 12:00 AM

The files in the Bin dir (AjaxControlToolkit.dll) has the same name as the official MS AJAX control toolkit!

How do I go about using both in the same project?

Posted by: Anosh on December 20, 2007 12:00 AM

Once the popup is displayed its possible to tab to the background and press space to access whatever link or button the background contains!

Is there a way to prevent this?

Posted by: Anosh on December 23, 2007 12:00 AM

I found another "bug".

Try the following:
Go to http://www.technorati.com and click Sign in.
Now scroll down and you notice all the links are suddenly accessable!

This is in Firefox 2.0.11 . It doesnt have the same behaviour in IE.

what a page .......!

Posted by: David on March 9, 2008 12:00 AM

Would you happen to have an example of how to use this sort of thing with a ListView control? I can get it to work without problem on the GridView, but am having no luck with ListView or DataList. Ive been struggling with it for quite a while...

ok,thanks!

This website is really helpful.

Posted by: ram on April 17, 2008 12:00 AM

its really helpful ..brief and clear explanation..
thanks

How do i show the modal-popup programmaticaly using Javascript?

Thanks,

Mudassir Azeemi
San Francisco, CA

Posted by: Arghyadeep on May 19, 2008 12:00 AM

This help me to solve two main issues of modalpopup in my project.

Thanks

Posted by: sundaresan on July 2, 2008 12:00 AM

I am using Modal Popup control in my asp application. what i need is while we are clicking the submit button the records should be saved in database and modal popup window should not get closed.

If any one have solution for this pls send me

I have a Linqdatasource for binding ListView control.
In ListView I have delete button . on this delete button I am opening a Modelpopup window having two button as ok
and cancel.on ok button I want to delete the record from the ListView.
On ok button in Modelpopup window I am calling the function
function ShowConfirm(source)
{
this._source = source;
this._popup = $find('ctl00_ContentPlaceHolder1_ListViewAirline_ctrl1_mdlPopup');
this._popup.show();
}

function okClick()
{
this._popup = $find('ctl00_ContentPlaceHolder1_ListViewAirline_ctrl1_mdlPopup');
this._popup.hide();
__doPostBack('ctl00_ContentPlaceHolder1_ListViewAirline_ctrl0_lnkDelete','');
// __doPostBack(this._source.name, '');
return false;
}

But after calling the function
cursor is not coming on my page or any event in the page so that i can delete the records in the ListView.

pls give any suggestions asap.

Vikas goel

Posted by: Kris Nobels on September 5, 2008 01:56 PM

I love your modal popup. But your demo does not work with opera. :-(

Can you tell me what the cause is ?

thanks

Kris

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

Consulting Services

Yep - I also offer consulting services. And heck, I'll do just about anything. If you enjoy my blog just drop me an email describing the work you need done.

Recent Comments

  • Kris Nobels wrote: I love your modal popup. But your demo does not work with opera. :-( Can you tell me what the caus...
  • vikas kumar wrote: I have a Linqdatasource for binding ListView control. In ListView I have delete button . on this del...
  • sundaresan wrote: I am using Modal Popup control in my asp application. what i need is while we are clicking the submi...
  • Arghyadeep wrote: This help me to solve two main issues of modalpopup in my project. Thanks ...
  • Mudassir Azeemi wrote: How do i show the modal-popup programmaticaly using Javascript? Thanks, Mudassir Azeemi San Franci...
  • ram wrote: its really helpful ..brief and clear explanation.. thanks ...
  • Richard wrote: This website is really helpful. ...
  • powerlin518 wrote: ok,thanks! ...