[JavaScript] pop up soll sich über div öffnen

chrisTucker · 10. Juni 2013

pop up soll sich über div öffnen

Guten Morgen community.

Ich möchte beim klicken eines Links, dass sich ein Pop-Up fenster öffnet welches genau die größe des Main contents einnimmt bzw ein minimalen abstand zu den Rändern des main contents hat und leicht durchsichtig angezeigt wird.

Mir schien , dass JS wohl am besten dafür geeignet ist. Wenn ich falsch liege korrigiert mich bitte.

Anzeige

Nanobyte · 10. Juni 2013

AW: pop up soll sich über div öffnen

Ein echtes Fenster kann in keiner weise mit Javascript Transparent dargestellt werden.

Was du aber machen könntest, was auch einfacher wäre, wäre ein Overlay (DIV) über dem Main-Content.

Einfach ein neues DIV in dein #main packen und per CSS ausrichten:

Code:

#overlay {
 display: block;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background-color: rgba(0,0,0,0.5); /* Transparenz 50% (Nur Hintergrundfarbe) */
 z-index: 2147483647; /* Das Element über allen anderen Stellen */
}

chrisTucker · 10. Juni 2013

AW: pop up soll sich über div öffnen

Also d.h ich kann diesen overlay erstellen und so anwenden, dass es sich beim klicken des links über den main content legt .. und sobald man in den background klickt dieses auch wieder verschwindet?

BlueSin · 10. Juni 2013

AW: pop up soll sich über div öffnen

Genau.
Dafür bräuchtest du 2 DIV's.

Code:

<body>
 <div id="main">
 <div id="overlay">
 </div>
 </div>
</body>

Code:

#main {
 position:relative;
 width:500px;
 height:500px;
}

#overlay {
 display:block;
 position:absolute:
 top:10px;
 left:10px;
 width:480px;
 height:480px;
}

Damit wäre dein Overlay 20px kleiner (im Verlgeich zum "Main" Div) und hätte rundherum 10px Abstand.

Nützliche Suchen

[JavaScript] pop up soll sich über div öffnen

Videos zum Themenbereich