Popup-Fenster im Baukasten erstellen :
- um nur den Inhalt einer Seite im Popup-Fenster öffnen zu lassen
- oder z.B. einen Musikplayer im Popup-Fenster öffnen lassen
- diese Beschreibung funktioniert in allen Designs
Das Problem im Baukasten :
Ein "Popup-Fenster" kann nur mit Grafikadresse oder Seitenadresse verlinkt werden. Möchten wir den
Inhalt einer Seite im Popup-Fenster öffnen lassen, sehen wir auch das Design drumherum (Header, Navigation, rechte Boxen u.s.w.).
Siehe ersten Beispiel-Link:
Hier
Popup-Beispiel 1.
Das Homepage-Design steht im Wege. Zum Inhalt müssten wir scrollen.
Hier
Popup-Beispiel 2.
So möchten wir es haben: Hier wird nur gewünschter Inhalt angezeigt .
Schritt 1: DIV erstellen
- wir erstellen ein DIV Feld
- das DIV bekommt eine ID
- zum Beispiel id="popup1"
- das DIV Feld einfügen im Feld "Text UNTER Design"
<div id="popup1"> Hier kommt Dein Inhalt hinein </div>
Schritt 2: DIV verstecken
- das DIV ist nun unter dem Design zu sehen
- wir machen es für alle Seiten unsichtbar mit display:none;
- diese Anweisungen einfügen im Feld "Text ÜBER Design"
<style type="text/css">
<!--
#popup1 {
padding: 10px;
text-align: left;
display:none;
overflow: hidden; }
-->
</style>
Das DIV Feld (unter dem Design) ist nun auf
keiner Seite zu sehen.
Schritt 3 : Neue Seite erstellen, wo DIV sichtbar wird
- wir erstellen eine neue Seite
- nenne die Seite z.B. "Popup"
- im Editor oben links auf "Quellcode" klicken
- dann diesen Code in die Seite einfügen:
<style type="text/css">
<!--
/* Design entfernen */
table, div {display:none!important;}
/* Hintergrund weiße Farbe */
body {
background-color: #ffffff!important;
background-image: none!important; }
/* Textformatierung */
form, span, p {
color: #000000!important;
font-family: arial;
font-size: 12px; }
/* das DIV sichtbar machen */
#popup1 {display:block!important;}
-->
</style>
- Die Seite Popup.htm hat nun kein Design mehr
- DIV ist nur auf Seite "/Popup.htm" sichtbar
- Seiten-URL können wir im Popup öffnen lassen
Schritt 4 : Verlinken als Popup-Fenster
- Seite "Popup.htm" kann als Popup-Fenster verlinkt werden
- die Verlinkung kannst du an gewünschter Stelle einfügen
- Hier der HTML-Code für verlinkten Text :
<a href="javascript:void(window.open('HIER SEITEN-URL','',
'resizable=no,
location=no,
left=50,
top=50,
menubar=no,
scrollbars=no,
status=no,
toolbar=no,
fullscreen=no,
dependent=no,width=360,height=235'))">HIER TEXT</a>
Das Popup-Fenster sollte etwas mehr
Breite und Höhe bekommen,
als der Inhalt (im Div) einnimmt.
Bei
left=50, top=50, könnt Ihr Position des Popups einstellen.
Schritt 5:
Nun entfernen wir den Link "Popup" aus der Navigation.
Die Seite "Popup.htm" haben wir ja bereits mit eigenem Text verlinkt.
Beschreibung:
Seite aus der Navigation entfernen
