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
Age Verification Check
I certify that I'm above 13 years old, and love web development!
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.
Modal window instance properties |
Description |
onclose=function(){
//your code here
} |
A custom event handler that executes your desired code
whenever the modal window is being closed. Return true at the
end to proceed with closing the window, return false to halt
the process (until the desired conditions are met). |
contentDoc |
If your modal window uses an iframe as its content,
use this property to easily reference the document object of the page
inside the iframe, and go from there. For example:var mysurvey=dhtmlmodal.open("surveybox", "iframe", "survey.htm", "Fill out this
survey", "width=700px,height=450px,resize=1,scrolling=1,center=1", "recal")
mysurvey.onclose=function(){
var iframedoc=this.contentDoc
alert(iframedoc.body.innerHTML) //alert entire body content of iframe
alert(iframedoc.getElementById("myname").value) //alert value of form
field with id="myname"
} |
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!
|