My favorites | Sign in
Project Home Downloads Wiki Issues Source
Search
for
HowToUse  
How to use the SubModal
Featured
Updated Feb 4, 2010 by subim...@gmail.com

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 donovang...@gmail.com, Oct 31, 2008

This is an awesome script. Thank you!

Comment by Robert.B...@gmail.com, Jun 7, 2009

Excelent work man!

And what about making it dragable?

Comment by gvild...@gmail.com, Jun 22, 2009

Exist a dragable version???

Comment by wagner.wutzke@gmail.com, 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 CarlosPi...@gmail.com, Sep 1, 2009

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

Comment by bruno.me...@chickasaw.net, Sep 2, 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 prasadz...@gmail.com, Dec 7, 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.ci...@gmail.com, Dec 7, 2009

very usefull Great work...

Comment by s4ni...@gmail.com, Dec 24, 2009

this is the best, i ever use! great thanks! use save at least 2 days of my life :)

Comment by acsoftli...@gmail.com, Jan 13, 2010

Necesitaba redireccionar el sub, y desarrolle esta funcion para el subModal.js

function redireccionar(url){

document.location.href = url;
}

Y dentro de la ventana modal lo llamo mediante

<a href="#" onclick="window.top.redireccionar('URL');">ENLACE</a>

Tambien he corregido un Bug Grafico:

En el centerPopWin() del subModal.js agregue una ultima linea:

gPopupMask.style.top = scTop + "px";

Esto evita que el fondo negro se quede en la parte superior en paginas grandes

AC soft live - http://www.acsoftlive.com

Comment by julianhe...@gmail.com, Jan 18, 2010

Is there a way to close the dialog box without using a <button>?

I was using this command: <a onclick="window.parent.hidePopWin()" href="index.html">close</a> but it seems to refresh my parent page.

Comment by eqvi...@gmail.com, May 1, 2010

Gracias me ha sido de muy buena utilidad tu ventana, pero no puedo cambiar el color del fondo (background) de la ventana principal.

Comment by eRC...@gmail.com, May 4, 2010

great script ! thank you !

Comment by tia.hae...@gmail.com, Aug 2, 2010

@ julianhectorRM - did you get an answer to your question? I like this feature but I need to programmatically close the modal and return to the parent window when done rather than fire off of user feedback such as clicking the close button

Comment by jenilo...@gmail.com, Aug 12, 2010

For refreshing parent page u have to send parameters between them. And the example is shown callback function.

Greetings

Comment by shov...@gmail.com, Oct 19, 2010

You can make the submodal draggable by using the DOM Drag and Drop script (dom-drag.js at http://www.dynamicdrive.com/dynamicindex11/domdrag/index.htm).

Include the script dom-drag.js and add the following in the initPopUp() function:

var theHandle = document.getElementById("popupTitleBar"); var theRoot = gPopupContainer; Drag.init(theHandle, theRoot);

below the following lines:

gPopupMask = document.getElementById("popupMask"); gPopupContainer = document.getElementById("popupContainer"); gPopFrame = document.getElementById("popupFrame"); Thanks

Comment by XSkm...@gmail.com, Dec 28, 2010

Amazing.... Very interesting and usefull :-)

Comment by marlons...@gmail.com, May 24, 2011

Very VERY cool tool :) And quite easy to implement.

Kudos.

Comment by mailrata...@gmail.com, Aug 19, 2011

Please suggest how to refresh Parent Page, when subModal popup closed.

Comment by NeiklotB...@gmail.com, Sep 23, 2011

HI I have problems with SUBMODAL, I need see the popup when the page is loaded for the first time and if one variable is empty. I'm using this code:

<script language="javascript"> //<-- function presentaAyuda() {

var Ciudad="'.$HTTP_GET_VARS['categories_id'].'"; if(Ciudad!=''){
showPopWin('seleccion.php', 1001, 464, returnRefresh);
}
} </script>

and in the HTML body sentence:

<body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" onLoad='presentaAyuda();'>

This code is perfect if I'm using Firefox, but in IE not function correctly, the popup is not show

THANKS by the help!

Comment by sundares...@gmail.com, Oct 5, 2011

Hi, This is an excellent but I need to tweak this such that the height of the modal should be auto height means it should fit as the per the content & should not show me the scroll.

Can anybody guide me how to get the intended result.

Thanks in advance.

Comment by ananthan...@gmail.com, Dec 1, 2011

hi.. tried the submodal with .Net3.5 but got few errors error 1 : error BC30456: 'showPopWin' is not a member of 'ASP.uc_utilities_ascx'.

here is the aspx page code..

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">

<title>Untitled Page</title> <link rel="stylesheet" type="text/css" href="~/subModal/subModal.css" />

<script type="text/javascript" src="~/subModal/common.js"></script>
<script type="text/javascript" src="~/subModal/subModal.js"></script>

</head> <body>

<form id="form1" runat="server"> <table>
<tr>
<td>
<asp:LinkButton? ID="LinkButton1?" OnClick?="showPopWin('TestSubModal?.aspx', width, height, null);"
runat="server">LinkButton?</asp:LinkButton>
</td>
</tr>
</table> </form>
</body> </html>

Comment by beausol...@gmail.com, Jan 13, 2012

How would I make the box close when the user clicks outside the modal window?

Comment by madhanpr...@gmail.com, Feb 28, 2012

Great work!

The font in the text area looks varies between the browsers. Say in Chrome, both text and textarea has same font, while in firefox the text area font is different. Any help on this?

Comment by thakerha...@gmail.com, May 18, 2012

Awesome... Loved it thanks buddy ! Simply coooooool !


Sign in to add a comment
Powered by Google Project Hosting