Farewell to Modals

At first sight, modal windows are great. In contrast to normal windows modals guarantee undivided user attention—the user has to dismiss this window to work with a web page. For this exact reason we’ve used modals heavily in our product to build dialog windows since day one. Not those obnoxious “buy meds online” popups, but rich, bona fide dialog windows.

JavaScript syntax for popping up a modal window is somewhat different from that of a normal one. No big deal, really. You write a basic browser sniffer and pop up a modal in Internet Explorer, and a normal window in other browsers. In IE it’s window.showModalDialog(), and window.open() everywhere else. One can argue Netscape had a “hidden” parameter to make a window modal if the script was signed, etc, but the sake of simplicity let’s say that showModalDialog is a function proprietary to Microsoft.

For two years we’ve been coding around different corks of modals. My buddy at work used his client-side magic to fix various issues of using modals with ASP.NET pages.

For example, if you open two windows of the exact same height and width—a modal one and a plain one—they will be of different physical size, which you have to accommodate with some math so the two would actually cover more or less the same area on your screen.

Next, modals are difficult when you need a page within them to post back, which ASP.NET pages do a lot. Neither can you access the window opener because in a modal it makes no sense. These are no small problems.

More Weirdness

There was a very strange bug we observed, but I haven’t been able to reproduce it in a test project. The setup was as follows: we had a page displaying a data grid. You could select several items in the grid and click a button below it. The page would post back, generate a report on these selected items, and pop up a modal window with a fancy chart. At that time we had all pages automatically store their view state in the database.

The weird thing is the page that built the report would have its view state corrupted after it popped up a modal! This is was a difficult bug to track down and to this day we don’t know how (and why!) view state and modal windows are related. The solution was simple enough—if the report page was a plain window the trouble with view state would go away.

Conclusion

The lesson I learned: modals are not worth the trouble. They don’t work across browsers well enough, they behave differently, and ASP.NET pages have issues when opened in modals. Having spent this much time with modals, we decided to pull the plug on them for good. No more modals!

Milan,

I went though those same struggles using modals with ASP.NET pages and came to the same conclusion. They are not worth the headaches. Even when you can guarantee that you'll have 100% IE users, there's just too much to worry about with postbacks etc that make for a lot of effort with little payoff.

Glad to see I'm not alone with abandoning modals.

-Ryan

I just recently added an article to codeproject that wrapped this functionality into an asp.net server control:

http://www.codesummit.com/Articles.htm

Well, the biggest drawback of modals is... their nature. You've developed a nice control, but it's the way they behave that makes dealing with them annoying.

Can you be more specific about their behavior? As I stated in my article, forcing someone to use a modal window on the web needs to be done judicously. But other than the modal window concept, is there something in the implemenation that you don't like? I haven't made it cross-browser compatible because the other browsers don't have a good implementation available. I've seen work-arounds, but they have quirks. Most annoyingly, you can't make them modal!

The area where we've had the most trouble with modals were postbacks on ASP.NET pages. We had to inject a special frame to deal with postbacks.

I don't remember all the details, but every time my coworker had to devise a hack. In the end modals (being IE only) were so not worth the trouble that we ditched them. Life's been good since then. :)

Hi freinds,

I am also facing problems with modal dialogs, works fine in IE but fails in Mozilla Firefox. Firefox doesnt support window.shoemodaldialog function and many more Similarely styles sheets are use less in firefox.

Well i have too decided to not use modal widnows in the applications, and it seams for long time there wont be a solution. So lets burried modal windows in ground.

Thanx & Regards,
Vijay

I'd like to add that yet another annoying thing about modal dialogs is that, at least in my application, when the modal dialog is closed, control does NOT appear to be coming back to the Page_Load event of the parent web form.
Has anyone else seen this? Is that typical/normal behavior?
(I suppose I could try to close the modal dialog by doing Response.Redirect back to its parent, but I'd much rather not have the modal dialog 'know' too much about where to go once it's done.
Thanks,
David

Hello Friend,

I have to use window in one of the applications...there is no other option for me. The provlem which i am facing is that "if you open a modal window using window.showModalDialog and try to write any server side code for that modal window...it opens one more window which is not modal....i dun know how to solve this.

Parveen

After messing around with modal dialog boxes for a week this was the very first helpful post I have found. Thank you for sharing your wisdom!

It's been some time now since we pulled the plug on modals, and we haven't had any regret. In fact, it helped us move away from the desktop development paradigm which doesn't work that well on the stateless web.

Adding to the page displayed by a call to showModalDialog will fix the postback problem you were experiencing.

Seems that it didn't escape my html in my previous post.

Adding < base target="_self" > ...

That worked like a CHAMP!!! THANK YOU.

Check out this article:

http://joshirushabh.blogspot.com/2006/09/in-quest-of-truly-modal-popup-in.html

Here is an article I wrote on the same topic some days back. It might be useful to some one looking for more help on this topic:

http://joshirushabh.blogspot.com/2006/09/in-quest-of-truly-modal-popup-in.html

Hi,
I have window which is opening by using window.open method . I want it to a modal but i dont want to use showModalDialaog() if window object. Please let me know how i can do . I used modal=yes attribute also but it didnt work...

While there a many fine articles on the web on how to program modals with ASP.NET, I couldn't get modals to work like
I'd hoped. Thanks for getting me off the modal path early
(after only two weeks).