rendered paste body<html><head> <style type="text/css"> /* * Layer über die gesamte Seite, enthält schließen-Link und IFrame-Container */ #layer { padding-bottom: 50px; background-color: rgba(0,0,0,0.8); /* schwarzer Hintergrund, 80% Deckkraft */ display: none; /* nicht sichtbar (Layer ausgeblendet) */ position: fixed; /* am Browserfenster ausrichten (position:absolute; für Ausrichtung an Webseite) */ top: 0px; /* kein Abstand oben, */ bottom: 0px; /* ~ unten, */ left: 0px; /* ~ links, */ right: 0px; /* ~ rechts */ } /* * div-Container, der den IFrame beinhaltet */ #iframe-positionierung { position: absolute; /* Ausrichtung am fixed positionierten Layer */ top: 30px; /* oben mehr Abstand für schließen-Link */ bottom: 30px; left: 30px; right: 30px; } /* * der IFrame */ #iframe-im-layer { width: 100%; /* volle Breite des ausrichtenden div-Containers */ height: 100%; /* volle Höhe ~ */ border: none; /* keinen eigenen Rahmen */ background-color: white; /* deckender Hintergrund, weiß */ } </style> <script type="text/javascript"> function layerEinblenden(button, css /* (optional) */ ) { document.getElementById('iframe-im-layer').src=button.value; /* value-Attribut des Buttons als IFrame-URL zuweisen */ document.getElementById('iframe-positionierung').setAttribute('style', css); /* übergebene Style-Angaben zuweisen */ document.getElementById('layer').style.display='block'; /* Layer sichtbar machen */ } function layerAusblenden() { document.getElementById('layer').style.display='none'; /* Layer unsichtbar machen */ } </script></head><body> <button value="http://de.selfhtml.org/" onclick="layerEinblenden(this, 'border:5px dotted red; width:600px;height:400px;margin:auto;');">SelfHTML</button> <button value="http://www.w3schools.com/" onclick="layerEinblenden(this);">w3schools</button> <button value="http://www.css4you.de/" onclick="layerEinblenden(this);">CSS 4 You</button> <div id="layer" onclick="layerAusblenden();" style=""> <div style="text-align:right; margin:8px;"> <a href="javascript:layerAusblenden()">schließen</a> </div> <div id="iframe-positionierung"> <iframe id="iframe-im-layer">Ihr Browser zeigt leider keine eingebetteten Frames.</iframe> </div> </div> <h1>Überschrift</h1> <p> Text bla blub<br> Text bla blub<br> Text bla blub<br> </p></body></html>