• Calendars
• Date & Time
• Document Effects
• Dynamic Content
• Form Effects
• Games
• Image Effects
• Links & Tooltips
• Menus & Navigation
• Mouse and Cursor
• Scrollers
• Text Animations
• User/System Preference
• Window and Frames
• Other
• XML and RSS

• Script Forums
• Recommend Us
• Usage Terms
• Free JavaScripts

Note: This script is an extension of DHTML Window widget, and requires it to work.
Note: Last updated April 16th, 08 to v1.1, to bring it in sync with DHTML Window widget. See changelog for the later for changes.

Description: This script- or should we say plugin- extends DHTML Window widget with modal windows support. A modal window differs from a regular DHTML window in that a "veil" appears over the rest of the page whenever the modal window is open, requiring the user to explicitly close it before the veil is lifted and the user can interact with the page again. Use it when you want the DHTML window to command absolute attention from your visitor, such as a form that should be filled out (or explicitly dismissed). The script supports a custom "onclose" event handler (extended from its counterpart in DHTML Window widget) that lets you access and react to the data entered into the modal window when the window is closed. Cool!

Demos:

1) DHTML Modal window Example 1 (iframe content/ auto load)

2) DHTML Modal Window Example 2 (iframe/ onclick):

Signup for our newletter

3) DHTML Modal Window Example 3 (hidden div/ onclick):

Open Age Verification window

Directions:

DHTML Modal window is an extension of the main DHTML Window Widget script, which means it adds to the original script with the new capability without modifying any files in the original script. To install DHTML Modal window, simply download dhtmlmodal.zip, and unzip its contents. It contains the full original DHTML Window script unaltered, plus an extra folder called modal/ that enables you the ability to also open DHTML modal windows:

• dhtmlmodal.zip (consists of the below files):
  • windowfiles/ (files for DHTML window widget itself)
  • demo.htm (demo page for DHTML Window widget itself)
  • demo-modal.htm (demo page for DHTML Modal Window)
  • modalfiles/modal.css
  • modalfiles/modal.js

Run "demo-modal.htm" inside the unzip file to see how to call DHTML modal windows.

For your Information

This script merely extends the original DHTML Window with the ability to create modal windows (via dhtmlmodal.open()). It does not overwrite or modify the former in anyway. You can still call regular DHTML windows like before, except with this script installed, you can now also call modal windows.

Originally on your pages with DHTML window widget installed, at the top of the page, you have the below code references (in gray):

<link rel="stylesheet" href="dhtmlwindow.css" type="text/css" />

<script type="text/javascript" src="dhtmlwindow.js">

/***********************************************
* DHTML Window Widget- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<link rel="stylesheet" href="modalfiles/modal.css" type="text/css" />
<script type="text/javascript" src="modalfiles/modal.js"></script>

The two new lines in red, as shown above are new and should be added to your page when you wish to call DHTML modal windows.

With the script installed, you now have access to a new function called dhtmlmodal.open():

var uniquevar=dhtmlmodal.open(uniqueID, contenttype, contentsource, title, attributes, [recalonload])

This function behaves identical to dhtmlwindow.open(), except the window called using it is modal in nature. If any of the above parameters look foreign to you, it's time now to read up on the documentation for the original DHTML window widget!

So, below are a couple of examples of displaying a modal window, one automatically when the page loads, and the other, when a click action is performed:

<script type="text/javascript">
var mysurvey=dhtmlmodal.open("surveybox", "iframe", "survey.htm", "Fill out this survey", "width=700px,height=450px,resize=1,scrolling=1,center=1", "recal")
</script>

<a href="#" onClick="getemail=dhtmlmodal.open('newsletterbox', 'div', 'emaildiv', 'Sign up for our Newsletter', 'width=400px,height=300px,center=1,resize=0,scrolling=1'); return false">Open Newsletter window</a>

Processing the data entered into a modal window

Modal windows are often used to solicit information from visitors, such as a form contained inside the window. In these cases you'll most likely want a way to access the entered data from the calling page for further processing (instead of just submitting it). Well, DHTML modal window lets you do that, via the "onclose" event handler.

Remember, a DHTML Modal window is just a DIV on the page that resembles a window, and not an actual window. So unless you're using an iframe as its content, the way to accessing the data, such as a form,  inside the window is no different than accessing the form directly inside your page- it does exist directly inside your page! Now, if your window content is an iframe, a property exclusive to modal windows called "contentDoc" lets you easily access this iframe's document object, providing the root for accessing anything inside the contained page. With the help of the "onclose" event handler of a modal window to actually run your desired code when the window is about to be closed, you have all you need to examine, validate and retrieve the data entered into a modal window to a script on the calling page.

Let me show you two examples now of this in action, one for a form contained inside an iframe, the other, inside a hidden div on the page, both contained within a modal window of course.

Modal window processing #1: Form inside an iframe

In this first example, I'm going to use Modal Window to load an external page that contains a form. I'm then going to use the "onclose" event handler to access and return the data entered into the form:

<script type="text/javascript">

function opennewsletter(){
//Open a modal window with an iframe page inside, and assign the result to a global variable called "emailwindow"
emailwindow=dhtmlmodal.open('EmailBox', 'iframe', 'modalfiles/newsletter.htm', 'Newsletter Signup page', 'width=350px,height=200px,center=1,resize=0,scrolling=1')

emailwindow.onclose=function(){
var theform=this.contentDoc.forms[0] //Access first form inside iframe for demo purposes
var theemail=this.contentDoc.getElementById("emailfield") //Access form field with id="emailfield"
if (theemail.value.indexOf("@")==-1){ //crude check for invalid email
alert("Please enter a valid email address")
return false //cancel closing of modal window
}
else{ //else if this is a valid email
document.getElementById("youremail").innerHTML=theemail.value //Assign the email to a span on the page
return true //allow closing of window
}
}
}

</script>

<a href="#" onClick="opennewsletter(); return false">Signup for our newletter:</a> <span id="youremail" style="color: red"></span>

Here's the contents of the external page being shown (newsletter.htm):

<h4>Sign up for our newsletter!</h4>
<form id="myform">
<p>Enter your email address please:<br>
<input id="emailfield" type="text" name="T1" size="30" />
<input type="button" value="Ok" name="B1" onClick="parent.emailwindow.hide()" /></p>
</form>

The key points to take away as far as accessing a modal window based on an iframe are:

• When assigning the results of dhtmlmodal.open() to a variable to house the results (ie: emailwindow), make sure this variable is global if it's defined inside a function (without the keyword var proceeding it), like above. This is necessary, because you're going to have to refer to this variable again inside your iframe to create the "close" button.

• The code that goes inside emailwindow.onclose=function(){...} is the custom code you wish to run when the window is about to be closed. Since the modal window content is an iframe, We take advantage of the contentDoc property of the modal window instance to gain access to the iframe's document object, then go from there to access anything inside the page itself. By returning true or false within the code, we dictate when the conditions have been met to proceed with closing the window.

• Inside the iframe page itself, to create a "close" button, you need to refer back to the variable you assigned the modal window when you opened it, in this case, "emailwindow". Since the page is contained inside an iframe, to get to this variable, we must first travel back to the content's parent window, parent, then, access the variable. If you're familiar with JavaScript and the DOM, this is just standard DOM traversal. Then, use its hide() method to hide the modal window.

• Make sure the external page contained within the iframe resides on the same domain as the calling page! Due to security reasons JavaScript will not allow you to access external domain pages.

Modal window processing #2: Form inside a hidden DIV on the page

In this second example, lets assume the content of the modal window is simply a hidden DIV on the page, instead of an iframe. In other words, we'll be switching to "div" content. Observe the difference in accessing this content:

<script type="text/javascript">

function opennewsletter(){
//Open a modal window populated with the contents of a hidden DIV, and assign the result to a global variable called "emailwindow"
emailwindow=dhtmlmodal.open('EmailBox', 'div', 'sitenewsletter', 'Newsletter Signup page', 'width=350px,height=200px,center=1,resize=0,scrolling=1')

emailwindow.onclose=function(){
var theform=document.getElementById("myform") //Access the form inside the modal window
var theemail=document.getElementById("emailfield") //Access form field with id="emailfield"
if (theemail.value.indexOf("@")==-1){ //crude check for invalid email
alert("Please enter a valid email address")
return false //cancel closing of modal window
}
else{ //else if this is a valid email
document.getElementById("youremail").innerHTML=theemail.value //Assign the email to a span on the page
return true //allow closing of window
}
}
}

</script>

<a href="#" onClick="opennewsletter(); return false">Signup for our newletter:</a> <span id="youremail" style="color: red"></span>

And here's the contents of the modal window that's simply inside a hidden DIV on the same page:

<div id="sitenewsletter" style="display:none">
<h4>Sign up for our newsletter!</h4>
<form id="myform">
<p>Enter your email address please:<br>
<input id="emailfield" type="text" name="T1" size="30" />
<input type="button" value="Ok" name="B1" onClick="emailwindow.hide()" /></p>
</form>
</div>

As you can see, since the contents of the modal window exist on the same page, you access it as you would with any content on the page. This is true whether the content is retrieved via "inline", "div", or "ajax" mode. It makes no difference. As already seen, for "iframe" content, you can enlist the help of the "contentDoc" property to first jump to the iframe's document object before taking over yourself.

In summary, at the heart of implementing your custom code to be executed via the "onclose" event handler is to access the modal window's content via the DOM, and either return true or false at each end. Check out the demo page within the zip file for all the demo codes laid out neatly for you to digest.

Have fun, but don't lose sight of the main purpose of modal windows!