PDA

View Full Version : DHTML Modal window v1.01



tony9339
05-07-2007, 05:02 PM
Hi,

1) Script Title:

DHTML Modal window v1.01

2) Script URL (on DD):

http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/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
05-07-2007, 05:21 PM
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
05-07-2007, 05:46 PM
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
05-07-2007, 06:15 PM
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
05-07-2007, 06:45 PM
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
05-07-2007, 07:19 PM
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
05-07-2007, 07:57 PM
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
05-07-2007, 09:33 PM
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
05-07-2007, 10:07 PM
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
05-07-2007, 11:34 PM
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;
}

pr_patil
08-14-2007, 03:27 AM
Hi,
THis may not be right thread to post this. I was evaluating dhtml modal window library. I noticed that although the modal window disables the mouse actions on parent window, if I use tab, I can action on the elements/links on the parent window. You can try:
- open the demo page
- open the modal window
- go to the IE address bar and then press tab until some link on parent window is highlighted and press enter.

Is this a known bug?

THanks



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;
}