Wierd zindex behavior

[Razzbar]

I'm using a div as a floating dialog box. I'd rather use a popup
window, but due to all the popup blockers in use, I have to use
another method, a div that has absolute positioning.

The damn thing won't get in front of dropdown listboxes! I
check the currentstyle.zindex of the listoxes, and they're
set at 0. I set the div.style.zindex to some higher number,
and it doesn't help. I minimize and restore the window,
hoping it will redraw correctly, but no luck.

IE 6. Bug. BAH!

Any suggestions?

TIA,

 

[Michael Winter]

I'm using a div as a floating dialog box. I'd rather use a popup
window, but due to all the popup blockers in use, I have to use
another method, a div that has absolute positioning.

The damn thing won't get in front of dropdown listboxes! I
check the currentstyle.zindex of the listoxes, and they're
set at 0. I set the div.style.zindex to some higher number,
and it doesn't help. I minimize and restore the window,
hoping it will redraw correctly, but no luck.

IE 6. Bug. BAH!

It's not restricted to IE, and there's nothing you can do about it. It's
simply how the browser (or OS, depending) renders the control.

Mike

 

[Richard Cornford]

Razzbar wrote:

It's not restricted to IE, and there's nothing you can do about it.
It's simply how the browser (or OS, depending) renders the control.

One proposed strategy for dealing with the way form controls show
through positioned DIVs is to set their visibility style property to
"hidden" on the controls. Either hiding all of the controls on a page
whenever the DIV is visible (which shouldn't be a problem if the DIV is
acting as a modal dialog), or comparing the control positions with the
offsets box of the DIV and hiding any controls that are overlapped by
the DIV (quite a lot of work to implement cross-browser), and
re-revealing them when uncovered.

Netscape 4 rather ruins that plan as it is not possible to individually
hide form controls and putting them in a positioned DIV/Layer and hiding
that influences how they are interpreted as part of any containing form.

Richard.

 

[Jim Ley]

One proposed strategy for dealing with the way form controls show
through positioned DIVs is to set their visibility style property to
"hidden" on the controls. Either hiding all of the controls on a page
whenever the DIV is visible (which shouldn't be a problem if the DIV is
acting as a modal dialog), or comparing the control positions with the
offsets box of the DIV and hiding any controls that are overlapped by
the DIV (quite a lot of work to implement cross-browser), and
re-revealing them when uncovered.

I tend to use IFRAME's as dividers, add to the DIV a firstChild which
is an empty iframe sized to the same size as the DIV.

Jim.

 

[Matt Kruse]

I tend to use IFRAME's as dividers, add to the DIV a firstChild which
is an empty iframe sized to the same size as the DIV.

This is indeed the best solution I've found. Iframes will always show over
select objects and other windows controls, so using them as "popups" seems
to be the best solution all-around (for browsers which support them).
I use this approach in a new version of a popup window library which I'm
testing and refining:
http://www.mattkruse.com/javascript/popupwindow/temp.html

This solution tries to use the "best available" popup method if the user
doesn't specify one. If the browser is able to create new objects, then it
tries to create a DIV and populate it. Unless the page has select elements,
in which cases it tries to create an IFRAME and use it. It's not perfect,
and I haven't done full cross-browser testing, but I think in theory it will
work well, and hide all the implementation mess from a user who simply wants
a popup that behaves as expected.

 

[Jim Ley]

This solution tries to use the "best available" popup method if the user
doesn't specify one. If the browser is able to create new objects, then it
tries to create a DIV and populate it. Unless the page has select elements,
in which cases it tries to create an IFRAME and use it. It's not perfect,
and I haven't done full cross-browser testing, but I think in theory it will
work well, and hide all the implementation mess from a user who simply wants
a popup that behaves as expected.

Ah, I don't use IFRAMES to actually hold the content, that makes
adding script to them difficult and means you have to load stylesheets
etc. into the IFRAME. I just use it as a divider:

so you get something like this:

<div>
<iframe src="javascript:'<html></body></html>"
style="position:absolute;z-index:-1;top:-1;left:-1;height:100px;width:100px;overflow:hidden;"></iframe>
Your popup content
</div>

Jim.