DHTML modal window / selectbox problem

[ozdur]

1) Script Title: DHTML modal window

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...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]

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]

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 technique. I may add it to the script in future versions, though there plans at the moment.

[jpayne04]

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]

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]

Thanks.... works great!

[ddadmin]

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]

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]

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]

Sorry about that.

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