PDA

View Full Version : DHTML modal window / selectbox problem



ozdur
03-10-2007, 08:29 PM
1) Script Title: DHTML modal window

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

3) Describe problem:
Hi,
I am using this script on IE6 and having some problems with select boxes, because the veil doesn't cover them. When I create the dtml window as iframe, I move the window over select boxes so this gets over the problem in a way. But now I need to create a window sourced from a hidden div on opener page. This time, even my modal window is not covering the select boxes.. So what should I do ?

jpayne04
03-13-2007, 11:13 PM
Try setting the z-index of the form boxes to a lower value of the window (you may need to set the value in the css of the script) this should make the veil cover all elements lower in the z-index value....

ddadmin
03-14-2007, 08:19 AM
Ozdur:
Are you referring to IE5/6? Using z-index won't work in this case (the script already assigns the veil a high z-index value). Basically, in IE5 and 6, the select element will always appear above DHTML layers due to a rendering bug. One way around it is via the iframe shim (http://dotnetjunkies.com/WebLog/jking/archive/2003/10/30/2975.aspx) technique. I may add it to the script in future versions, though there plans at the moment.

jpayne04
03-14-2007, 06:13 PM
So.... how would this be added to the modal window? Example:http://www.questable.com (click on the movie trailer in main box)

Thanks in advance,

Jonathan

jscheuer1
03-14-2007, 06:57 PM
With a modal window and its overlay, no iframe shim should be required as, the select elements are not used while the overlay is visible. The selects can simply be rendered invisible.

Using jpayne04's existing code, we can do this:


<script type="text/javascript">
document.write('\n<!--[if lte IE 6]>\n\
<span id="ie_6_or_less" style="display:none;"><\/span>\n\
<![endif]-->\n');
var ftg;
function opentrailer(){
ftg=dhtmlmodal.open("movietrailer", "iframe", "mmedia/FTGtrailer.swf", "facing the giants", "width=381px,height=304px,center=1,resize=1,scrolling=0")
if(typeof ie_6_or_less !='undefined')
for (var i_tem = 0; i_tem < document.getElementsByTagName('select').length; i_tem++)
document.getElementsByTagName('select')[i_tem].style.visibility='hidden';
ftg.onclose=function(){ //Define custom code to run when window is closed
document.getElementsByTagName('iframe')[0].setAttribute('src', 'about:blank', 0);
if(typeof ie_6_or_less !='undefined')
for (var i_tem = 0; i_tem < document.getElementsByTagName('select').length; i_tem++)
document.getElementsByTagName('select')[i_tem].style.visibility='';
if(window.opera&&!ftg.cv){
ftg.cv=1
ftg=dhtmlmodal.open("movietrailer", "iframe", "about:blank", "Facing The Giants", "width=381px,height=304px,center=1,resize=1,scrolling=0")
dhtmlmodal.close(ftg);
setTimeout("ftg.cv=0", 1000);
}
return true;
}
}
//opentrailer()
</script>

Note: This only applies directly to jpayne04 as, the code used there was previously altered to ensure that the onclose function fires no matter how the modal window is closed.

jpayne04
03-14-2007, 10:47 PM
Thanks.... works great!

ddadmin
03-15-2007, 01:49 AM
With a modal window and its overlay, no iframe shim should be required as, the select elements are not used while the overlay is visible.

You're right of course John. Can't believe I missed that one.

papernapkin
03-16-2007, 02:43 PM
First poster here!
Love the script and it works flawlessly...well, except for the same problem as above. Unfortunately I still can't get it to work. I've tried almost everything.

If you could take a look at the code on this page: http://cashaccounts.com/%5Fprototype/cart/payment.aspx

The select boxes are still on top. I am just connecting to the original code you had in the external javascript file. Nothing has been changed.

HELP!:)

jscheuer1
03-16-2007, 02:52 PM
First poster here!
Love the script and it works flawlessly...well, except for the same problem as above. Unfortunately I still can't get it to work. I've tried almost everything.

If you could take a look at the code on this page: http://cashaccounts.com/%5Fprototype/cart/payment.aspx

The select boxes are still on top. I am just connecting to the original code you had in the external javascript file. Nothing has been changed.

HELP!:)

I don't see a modal window on that page.

papernapkin
03-16-2007, 03:24 PM
Sorry about that.

At the top of the page please click on the "Tell A Friend" button.

jscheuer1
03-16-2007, 03:55 PM
OK first, in your modal.js file near the bottom make these additions(red):


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();
},

Next, we make up a script to launch the modal window:


<script type="text/javascript">
document.write('\n<!--[if lte IE 6]>\n\
<span id="ie_6_or_less" style="display:none;"><\/span>\n\
<![endif]-->\n');
var tell_a_friend;
function open_tfriend(){
if(typeof ie_6_or_less !='undefined')
for (var i_tem = 0; i_tem < document.getElementsByTagName('select').length; i_tem++)
document.getElementsByTagName('select')[i_tem].style.visibility='hidden';
tell_a_friend=dhtmlmodal.open('TellAFriend', 'div', 'popup', '', 'width=550px,height=375px,center=1,resize=0,scrolling=0');
tell_a_friend.onclose=function(){
if(typeof ie_6_or_less !='undefined')
for (var i_tem = 0; i_tem < document.getElementsByTagName('select').length; i_tem++)
document.getElementsByTagName('select')[i_tem].style.visibility='';
return true;
}
}
</script>

This should go in the body (or be external and linked to the body) but, be before the tell a friend link which should now look like so:


<a href="#" onclick="open_tfriend(); return false;">