DHTML Modal window v1.01

[tony9339]

Hi,

1) Script Title:

DHTML Modal window v1.01

2) Script URL (on DD):

http://www.dynamicdrive.com/dynamici...dhtmlmodal.htm

3) Describe problem:

Hi,

I want to use the DHTML Modal window v1.01 script on my web page. This is all scripted and working correctly. However I also have the opencube javascript menu system within the same page.

The problem is this. When you click on the link to open the modal window everything works fine, however the opencube menu does not become shaded out as the rest of the page. You can see the problem if you click on the link below:

http://www.cubeconcepts.com/shadowpopup/

Any ideas how I can make the menu shaded as well as the rest of the page?

Cheers

Tony

[Bob90]

Hi,

I'm not sure if this is the right forum, but I know the mods will move it if necessary.

So onto the problem.

Its to do with z-index, a property that defines what object displays on top of another. Like pieces of paper stacked on top of each other, the paper on the top has the highest z-index, the one on the bottom the lowest.

The menu has a z-index of 999999.

This can be reduced to 99

and

line 73 of the modal window script can be changed to -

document.write('<div id="interVeil" style="z-index:100;"></div>')

and change this too.

<div id="dhtmlwindowholder" style="z-index:101;">

I haven't tried this though.

[tony9339]

Hi Bob,

Thanks for your help. I have made the changes to the scripts, but could not find the

<div id="dhtmlwindowholder" style="z-index:101;">

line to change. I tested without this change, but still the same. I have uploaded the changed version to the same URL for you to see.

Thanks for your help on this.

Tony

[ddadmin]

You can try increasing the z-index of the veil layer, by editing modal.css. Change the 5 in the line:

z-index: 5;

to something greater, like 100. However, it won't help depending on how Opencube's menu is coded (ie: if it uses iframe in any part of its interface). You may want to ask Opencube about this.

[tony9339]

Hi,

Thanks for you help. Opencube does not use iframes which is what I thought could have been the problem.

I have added that line into the modal.css but anything greater than 99 on the z-index will make the popup window become shaded as well and not functional?? ( I changed the z-index on the opencube js to 99)

Thanks

T

[ddadmin]

Try adjusting the z-index of the DHTML window accordingly. Inside dhtmlwindow.css:

.dhtmlwindow{
z-index: 200;
position: absolute;
border: 2px solid black;
visibility: hidden;
background-color: white;
}

I'm really not too familiar with Opencube's menus, though looking at the source it's pretty hairy.

[tony9339]

Hi,

Thanks for your efforts. Its just the same. I have put in a request to opencube to see if they are able to help with the problem. I will let you know the outcome.

On another note I am trying to change the pop up window header text colour and background colour but cannot find where to do this. I presumed it would be within the .css files but cannot see the correct values anywhere. Do you have any ideas where this is?

Thanks

Tony

[ddadmin]

Do you mean the handle bar of the window? If so inside dhtmlwindow.css:

.drag-handle{ /*CSS for Drag Handle*/
padding: 1px;
text-indent: 3px;
font: bold 14px Arial;background-color: #CA0000;
color: white;
cursor: move;
overflow: hidden;
width: auto;
}

[tony9339]

Thats what I was using to change the drag handle but only the text seems to change in size. I cannot change the colour of the text nor the background colour. No matter what colour I put in the text stays white and the background stays blue???

I have been probably looking at this for far too long and missing something very obvious - help argh!

Thanks

Tony

[ddadmin]

Ah yes I forgot, you're using the modal window script, so the CSS for it overrides dhtmlwindow.css. Inside modal.css, you'd change this portion:

.drag-handle{ /*Overwrite default drag handle bar background color with below*/
background-color: #03277C;
}