HowToUse - submodal - How to use the SubModal - Project Hosting on Google Code

Updated Aug 26, 2008 by subimage
Labels:	Featured

HowToUse

How to use the SubModal

After downloading the code it’s as easy as including references to a couple files and inserting some HTML into your page.

At the head of your file you’ll want to add the following references…

<head>
    <link rel="stylesheet" type="text/css" href="subModal.css" />
    <script type="text/javascript" src="common.js"></script>
    <script type="text/javascript" src="subModal.js"></script>
</head>

The css contains sizing and display styles for the popup elements.

Common.js contains standard functions I find useful such as attaching event handlers and obtaining the browser’s dimensions.

subModal.js is where all the action happens. Inside event handlers are attached for the load and resize events of the browser. The load event initializes dhtml objects that are reused when showing, hiding, or resizing the window.

The javascript file also inserts any HTML necessary for the subModal.

Now that everything’s in place all you have to do is add something that’s going to call the function to show the modal.

This is accomplished by calling the following javascript

showPopWin('your_url_here.html', width, height, null);

OR by using a CSS selector like so

<a class="submodal" href="modalContent.html">show modal window using class</a>
<a class="submodal-200-400" href="modalContent.html">show modal window using class and overriding default size</a>

The first argument is the file to load, followed by width and height (integers). Any content that overflows these dimensions will scroll inside the modal, like a real window.

The fourth argument allows you to pass a javascript function that will be called when the window is closed – by calling hidePopWin(true). hidePopWin will not call the return function by default. This is useful for cancel button functions.

Callback

If you'd like to return a value or execute some other code when the window is closed, see the instructions on using a callback function here.

Comment by donovanglass, Oct 31, 2008

This is an awesome script. Thank you!

Comment by Robert.Berec, Jun 07, 2009

Excelent work man!

And what about making it dragable?

Comment by gvildacc, Jun 22, 2009

Exist a dragable version???

Comment by wagner.wutzke, Jun 25, 2009

Hello! Really great work! Is it possible to have more than one instance of a modal window on a browser window?

I am wishing to show a first modal window with a form representing a basic domain object and others little windows for adding/removing some properties for the given domain object.

Could it be possible with your tool?

Thnaks in advance.

Best regards,

Wagner

Comment by CarlosPinedaT, Sep 01, 2009

Gracias por su aporte.. muy buen script... faltan algunas cositas pero vas por el camino adecuado!

Comment by bruno.me...@chickasaw.net, Sep 02, 2009

Very useful tool.

I used the showPopWin() approach and it works great. One thing I noticed though, is that on return the IE progress bar keeps running unless I click something else (not in Firefox). I assume that it must be my code, although all of my javascript methods complete before that (verified with alerts()).

Do you have any idea what could be the cause? Or what debugging tool I could use to discover if something is still running?

Comment by prasadz123, Dec 07, 2009

Great work!...

How can we refresh the parent window, after clicking the save(say) button in the pop up window and closing??

Hari.

Comment by adem.cirak, Dec 07, 2009

very usefull Great work...