|
HowToUse
How to use the SubModal
Featured 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 javascriptshowPopWin('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. CallbackIf 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. |
► Sign in to add a comment
This is an awesome script. Thank you!
Excelent work man!
And what about making it dragable?
Exist a dragable version???
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
Gracias por su aporte.. muy buen script... faltan algunas cositas pero vas por el camino adecuado!
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?
Great work!...
Hari.very usefull Great work...
this is the best, i ever use! great thanks! use save at least 2 days of my life :)
Necesitaba redireccionar el sub, y desarrolle esta funcion para el subModal.js
function redireccionar(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
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.
Gracias me ha sido de muy buena utilidad tu ventana, pero no puedo cambiar el color del fondo (background) de la ventana principal.
great script ! thank you !
@ 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
For refreshing parent page u have to send parameters between them. And the example is shown callback function.
Greetings
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
Amazing.... Very interesting and usefull :-)
Very VERY cool tool :) And quite easy to implement.
Kudos.
Please suggest how to refresh Parent Page, when subModal popup closed.
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() {
} </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!
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.
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">
</head> <body>
</body> </html>How would I make the box close when the user clicks outside the modal window?
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?
Awesome... Loved it thanks buddy ! Simply coooooool !