DHTML Modal Window - Help with several challenging Veil Issues... CLUELESS

[avarseir]

1) Script Title: DHTML Modal v1.1

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

3) Describe problem:
Hi everyone, firstly thx for making such a wonderful and easy to use script for a novice like me. Awesome job!

I have several issues which i need the community to help with, I've been looking over the forums but can't find the solutions which could help me. My problems seem to be connected to one another, so i'll try my best to chronologically describe it:

Issue #1: Veil reappearing after close window is pressed

I have implemented the solution from thread http://www.dynamicdrive.com/forums/archive/index.php/t-30646.html which solved the issue but this led to my issue #2.

Issue #2: Veil not covering the entire page

I have added the solution from http://www.dynamicdrive.com/forums/showthread.php?t=26027 and have no issue on horizontal gap. Instead my problem lies with the vertical one.

The veil seems to be covering only the viewable area and when i scroll down, the veil doesn't cover the area.

Initially i don't encounter issue #2 but this issue only appears after solution from issue #1 is implemented.


Issue #3: Veil not covering some buttons

I've read several posts on the forum which mentions about z-index and i've tried to change the z-index to as high as possible in the modal.css file, but my veil ended up covering my modal window, which kind of defeat the purpose.

:confused::confused::confused:

my website under development can be seen here: http://ehub26.webhostinghub.com/~iplatf5/pkcom/

If you can help with any suggestions or point me to the right direction, i would really appreciate it. But do note that i'm pretty much a novice in scripting so need a lot of help in describing the solution in as simple an english as possible :)

Thanks in advance!!

[ibullock]

How are you positioning (relative, absolute, fixed etc.) the buttons that are appearing over top of the veil?

Usually problems like this happen when you've got some elements positioned absolutely. In this case changing the z-index on the veil will do nothing for you.

Instead, you should try changing the z-index on the buttons. Keep in mind that it can be necessary (although maybe not best practice) to set the z-index to a negative value.

I'd try this on the buttons and any parent elements. Try changing values using in-browser developer tools to save some time too, as this can be fairly tedious.

[avarseir]

ah ok thanks. I will try that out.

but the funny thing is that if i increase the z-index to 50000 for example, the modal window is also covered by the veil. I believe the dhtmlwindow.css did specify:

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

so why is the veil covering the window if i set the index to 50000?

Thx!

[avarseir]

thx for your advice, it turns out that deleting the position: relative from the css helped with the trick!

.ui-tabs .ui-tabs-nav
{ list-style: none; position: relative; padding: 0px 0px 0; overflow: hidden;
top: 1px; z-index:0; margin-top:10px; margin-left:7px; margin-bottom:0; height:27px;}

:p

Anyone with advice with issue #1 and issue #2???

:confused::confused::confused: