DHTML Modal Window: how to refresh page?

**jpayne04** · 03-05-2007, 06:03 AM

1) Script Title: DHTML Modal Window Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...dhtmlmodal.htm

3) Describe problem: I have the script running on a test page that loads an iframe within a div (per the example). This is because I have a flash movie trailer that you click to load in the window. But when I close the modal window the trailer still runs because it's now loaded into the page (of course the window is really just a div ON the page so the content is still active).

What I need to know is how can I use the close button to refresh the page and thus reset the div content and stop the movie from running? I can provide the url of the script if you want.

Thanks in advance

**codeexploiter** · 03-05-2007, 06:37 AM

You can add whatever code you wish (or even it could be function calls) inside a function which is available in the main JS file of the mentioned application

Code:

close:function(t)

**jpayne04** · 03-05-2007, 04:36 PM

Thanks, but I'm totally without a clue of the where, whats and whys of modifying the script. I'm basically a designer that can implement the scripts but would not know (in this script) where and what to place to refresh the page on the div's close function (or even where that function needs to be accessed).....

So if you can explain I'd truly appreciate it!

Thanks

**jscheuer1** · 03-05-2007, 05:33 PM

You don't even need to refresh the page, just change the iframe source attribute.

OK, you initialize the script for a modal window something like so (from the demo in the distribution):

Code:

var agreewin=dhtmlmodal.open("agreebox", "iframe", "modalfiles/agreement.htm", "This Page's Terms of service", "width=590px,height=450px,center=1,resize=1,scrolling=0", "recal")

agreewin or whatever made up variable name you use now holds this instance of the modal window.

So, after that you can have:

Code:

agreewin.onclose=function(){ //Define custom code to run when window is closed
document.getElementsByTagName('iframe')[0].src='about:blank';
return true;
}

The only tricky part here is that the number 0 refers to the first iframe on the page. If you have no other iframes and even if you do, this may be the correct number. However, if you have other iframes on the page that come before the iframe for the modal window, this number would need to be increased until it corresponds to the iframe in question.

So, putting it all together:

Code:

<script type="text/javascript">
var agreewin=dhtmlmodal.open("agreebox", "iframe", "modalfiles/agreement.htm", "This Page's Terms of service", "width=590px,height=450px,center=1,resize=1,scrolling=0", "recal")

agreewin.onclose=function(){ //Define custom code to run when window is closed
document.getElementsByTagName('iframe')[0].src='about:blank';
return true;
}
</script>

**jpayne04** · 03-05-2007, 06:24 PM

Thanks again, but that doesn't work either. I used the code you gave me exactly as given but the page does not reload (in the example it is the only iframe). Plus I'm using the div so the iframe does NOT autoload. I don't know how to launch the iframe (rather than the autoload) as there is no example code to use.

The examples are here:

With the div; www.questable.com/window_test.html
With the iframe; www.questable.com/test2.html

Thanks again, I appreciate the help!

**jpayne04** · 03-05-2007, 06:39 PM

I should clarify... sorry. It works in FF BOTH ways, but doesn't reload or refres (thus continuing to play the .swf file) in IE 7.0. Since everyone is upgrading to IE 7.0 (or purchasing machines with Vista/IE already installed) I need it to work there as well. I haven't tested on 98 or XP/IE 6.0 since I didn't get past the problems in IE 7.0.....

Thanks for your patience!

**jscheuer1** · 03-05-2007, 06:57 PM

I tried this out. It worked in FF and should work in IE but, I cannot tell for sure because there was some sort of cross domain security problem in that browser. Opera, I cannot be sure either as cross domain scripting of iframe could be the trouble there as well:

Code:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Test2</title>
<link rel="stylesheet" href="dhtmlwindow/windowfiles/dhtmlwindow.css" type="text/css" />

<script type="text/javascript" src="dhtmlwindow/windowfiles/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="dhtmlwindow/modalfiles/modal.css" type="text/css" />
<script type="text/javascript" src="dhtmlwindow/modalfiles/modal.js"></script>
</head>

<body>

<script type="text/javascript">
var ftg;
function opentrailer(){
ftg=dhtmlmodal.open("movietrailer", "iframe", "ftg.html", "Facing The Giants", "width=460px,height=360px,center=1,resize=1,scrolling=0", "recal")

ftg.onclose=function(){ //Define custom code to run when window is closed
document.getElementsByTagName('iframe')[0].src='about:blank';
return true;
}
}
opentrailer()
</script>
<a href="#" onclick="opentrailer(); return false">View Trailer</a> 

</body>
</html>

Testing seems to indicate that it will be fine once it is live.

Added:

However, more testing shows that the onclose function doesn't seem to be firing at all so, I cannot be sure what the trouble is. This is different than the behavior described on the demo page. I will need to do a full install of the scripts to see what is causing that. I have other things to do for now so, try the above, it may work once it is live.

**jpayne04** · 03-05-2007, 08:41 PM

Does the same thing as the other iframe test.... really strange as FF works with it fine, but it worked fine with the other solutions you gave me. I truly appreciate this help. I'm not a newbie by any means but this IE 7.0 bug is driving me to distraction.

I can use a regular pop-up I know (and may have to) but this script is definitely a great one! It provides my site with a great look-n-feel and would be useful for audio/video functions as it focuses your attention on what's playing by darkening the background - awesome!

But to make it work, well.........

Thanks again, you rock man!

**jscheuer1** · 03-05-2007, 11:56 PM

It turns out that this business of skipping the onclose event is a feature so that folks can dismiss the window without doing anything if they hit the x.

Just by adding this (red) to modal.js file near the bottom:

Code:

forceclose:function(t){ //function attached to default "close" icon of window to bypass "onclose" event, and just close window

	dhtmlwindow.rememberattrs(t) //remember window's dimensions/position on the page before closing
	t.style.display="none"
	this.veilstack--
		if (this.veilstack==0) //if this is the only modal window visible on the screen, and being closed
			this.interVeil.style.display="none"
			if(t.onclose)
			t.onclose();
},

Took care of it in IE 7 for the demo I already gave you. However, Opera would only 'fall for that' once. So, I had to add to the demo .htm file for opera:

Code:

<script type="text/javascript">
var ftg;
function opentrailer(){
ftg=dhtmlmodal.open("movietrailer", "iframe", "http://www.questable.com/ftg.html", "Facing The Giants", "width=460px,height=360px,center=1,resize=1,scrolling=0")

ftg.onclose=function(){ //Define custom code to run when window is closed
document.getElementsByTagName('iframe')[0].setAttribute('src', 'about:blank', 0);
if(window.opera&&!ftg.cv){
ftg.cv=1
opentrailer()
dhtmlmodal.close(ftg);
setTimeout("ftg.cv=0", 1000);
}
return true;
}
}
opentrailer()
</script>

I change src= to setAttribute but, that made no difference, it works either way.

So, after changing modal.js, I came up with this page that worked in all three browsers:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>

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

<script type="text/javascript" src="windowfiles/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>

</head>

<body>


<script type="text/javascript">
var ftg;
function opentrailer(){
ftg=dhtmlmodal.open("movietrailer", "iframe", "http://www.questable.com/ftg.html", "Facing The Giants", "width=460px,height=360px,center=1,resize=1,scrolling=0")

ftg.onclose=function(){ //Define custom code to run when window is closed
document.getElementsByTagName('iframe')[0].setAttribute('src', 'about:blank', 0);
if(window.opera&&!ftg.cv){
ftg.cv=1
opentrailer()
dhtmlmodal.close(ftg);
setTimeout("ftg.cv=0", 1000);
}
return true;
}
}
opentrailer()
</script>
<a href="#" onclick="opentrailer(); return false">View Trailer</a> 

</body>
</html>

**jpayne04** · 03-06-2007, 12:41 AM

Wow! Thanks... it works! Don't shoot me, but how do I keep the window from loading automatically and only on clicking the link?

BTW.... again, very much, thanks!

Thread: DHTML Modal Window: how to refresh page?

Thread Tools

Search Thread

DHTML Modal Window: how to refresh page?

Bookmarks

Bookmarks

Posting Permissions