Page 1 of 1

jQuery and Modal Paths Question with IFRAMEs

Posted: Thu Jan 29, 2009 9:08 pm
by supermike
Do you know what a modal and modeless dialog is? And how about a modal path? A modal path is like, instead of one step that's in a mode, you may have a tree of different steps in that mode, where you can usually cancel at any time except that one crucial final confirmation step, and then whey submit that, they get a return link to return to where they were. And the "where they were" part is often in two places in most applications, although there might be more. One place is usually the homepage, which you may have made into a dashboard, main menu, or home page. The other place is usually where someone was in a search.

Well, regarding modal paths, the web kind of sucks at this, versus a standalone client application. You see, in a standalone client app, if you've done a search, say, on classified listings, you can click that listing, a new window appears, and you can take actions on that window such as Edit, Delete, or Renew the listing, each of which may want to prompt you, ask you for some fields to be completed, and then give you a final submit and a final confirmation. But in the web, you have ugly methods to handle this:

A. Open a new window. If you just use like a hyperlink with TARGET="_new", you often see it open (at least in IE) in an ugly window of about 640x480 pixels and you have to resize it again.

B. Open a new window but size it with Javascript. This is a little better than A, but the problem is that some popup blockers block this and then you have to realize that people have installed all manner of crazy toolbars in their browser and so if you don't size the window right, they may have to scroll down before they see your content.

C. Open the mode in the same window, but drop a session var or cookie on where they were so that if they click Cancel or Return, they can get back to exactly where they left off, including show any searches just the way they were.

D. Open the mode in an IFRAME. Now this is a little trickier because let's say you want the IFRAME to be almost the same size as the viewport of the parent window, to dim the functions of the parent window unless they click Cancel in a link in the IFRAME, and when you resize the browser, the IFRAME needs to resize with it. Oh, and you need to make it work in FF2, FF3, Safari, Opera, Chrome, IE6, and IE7.

Of all these methods, C and D are the most elegant, but I want to shoot for method D. Has anyone attempted to make a modal path with an IFRAME, using jQuery, to do this technique?

To ask this in plain terms...

How do I use jQuery to make an IFRAME modal dialog, dims the background, and if you resize the browser window, the modal dialog resizes with it, and it works across all the browsers: IE6, IE7, FF2, FF3, Safari, Opera, and Chrome? I think I can do the IFRAME modal dialog and the dimmer background. The problem is getting it to resize properly when the browser window resizes, and across all the browsers.

Re: jQuery and Modal Paths Question with IFRAMEs

Posted: Fri Jan 30, 2009 2:28 pm
by pickle
Can't you just set the width of the IFrame with CSS, to be 80% or so? Height has always been tricky. You might be able to set it's height to 80% as well, if all it's parent elements (including <body> and <html> have their height set). If not, jQuery does have the ability to determine the size of the viewport.