Layer über die GANZE Seite

[VBMichi]

Hi,

ich habe mir einen kleines modalPanel in JS gebaut um Details von Benutzern ohne neuladen anzeigen zu lassen.

Sieht so aus:



Klappt alles super, das Problem entsteht wenn ich runterscrolle zu weiteren Ergebnissen und den Panel dann aufrufe:



Den Modalbereich habe ich folgendermaßen festgelegt:

.PopupPanelModalArea
{
     left: 0;
     top: 0;
     height: 100%;
     width: 100%;
     position: absolute;
     background-color:silver;
     filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
     z-index: 99;
     border: 0;
     -moz-opacity: 0.60;
}

Den Panel so:

Body
{
     font-family: Arial;
}

.PopupPanel
{
     border: solid 1px black;
     position: absolute;
     left: 50%;
     top: 50%;
     background-color: white;
     z-index: 100;
     
     height: 330px;
     margin-top: -100px;
									
     width: 400px;
     margin-left: -200px;
}

.PopupPanel .TitleBar
{
     margin: 0;
     display: block;
     background-color: #CEE3F6;
     line-height: 20px;
     color: white;
     font-weight: bold;
     padding: 0 0 0 5px;
}

.PopupPanel .ContentArea
{
     padding: 0 0 0 5px;
}

Ich möchte das wenn ich runterscrolle und auf ein Ergebnis klicke, wieder die aktuelle Ansicht ausgegraut wird, und nicht das oben. Sonst

a) sieht man nichts von den Details
b) kann man weiterarbeiten während oben der Panel offen ist

Hat jemand Lösungsvorschläge?

Viele Grüße,
Michi

[kkapsner]

position: fixed;

PS: geht nicht im IE6 - aber "who cares?"

[VBMichi]

Nunja,

"funktioniert im IE6 nicht", ist ziemlich nett ausgedrückt für das was das Mistding produziert (sorry für das große Bild, anders kann man das Problem nicht erkennen):



Haste auch noch ne Lösung um DAS Problem zu umgehen?
Unter Opera und FireFox klappt deine Lösung super.

Ich habe es so versucht:

position: fixed;
									
<!--[if IE 6]>
position: absolute;
<![endif]-->


<!--[if IE 5]>
position: absolute;
<![endif]-->

Hab aber diese Tags noch nie gesehen und funktioniert tuts auch nicht.

Viele Grüße,
Michi

[kkapsner]

Komplettes Style-Tag in diese Abfrage packen.

[VBMichi]

Dann müsste ich den Style-Tag ja 3x mal anlegen:

<!--[if IE 6]>
<style>...</style>
<![endif]-->

<!--[if IE 5]>
<style>...</style>
<![endif]-->

<style>...</style>

Klappt das dann das beim IE 6 der oberste, beim IE 5 der zweite und bei allen anderen Browser der dritte Style-Tag genommen wird?

Viele Grüße,
Michi

[kkapsner]

Ev. passt die Reihenfoge nicht, aber probier's aus.

[VBMichi]

Ganz oben muss der original Style-Tag stehen, anschließend kommen die IE-Abfragen - dann klappt alles.

Steht auch nochmal hier: Browserweichen

Danke nochmal!

Gruß,
Michi

[anna55]

Dann müsste ich den Style-Tag ja 3x mal anlegen:

Nicht wirklich, den IE5 kannst Du vergessen, den setzen zu wenige Nutzer ein. In dieser Browserstatistik wird er gar nicht mehr aufgeführt: Browser Statistics

Ich bevorzuge statt der schon erwähnten Conditional Comments für den IE6 den Stern-HTML-Hack, da dieser direkt im CSS steht und ich dann alles auf einen Blick sehe. Da brauche ich mir den Code nicht zusammensuchen, wenn z.B. mal was geändert werden muss.