Registrieren
Die Registrierung ist kostenlos und unverbindlich.
Bitte wählen Sie einen Usernamen und Ihr Passwort:
Box-Fenster About
Fenster öffnen auf der selben Seite
Per CSS-div-Box öffnen sich Fenster direkt innerhalb der selben Seite bei Klick auf einigen 'Weiter-Buttons'. Gerne legen Sie bei Bedarf nach diesem Prinzip weitere neue Fenster an bzw. löschen Sie auch nicht benötigte.
Neue Fenster anlegen
Hinweis: Der fettgedruckte Teil bei den nachfolgenden Code-Beispielen soll Ihnen bereits zeigen, wie Sie ein neues Fenster anlegen bzw. zum vorhandenen Code hinzufügen!So sieht die Verlinkung bei den Links 'About' und 'Team' aus.
HTML
<label for="open-about"><a>More About</a></label>
<label for="open-team"><a>More Team</a></label>
<label for="open-ihr-fenster"><a>Ihr Fenster</a></label>
Und hier ist die dazugehörige Einschalt-Funktion dieser Fenster in der CSS-Datei ('boxfenster.css):
CSS
/* schaltfunktion AN / AUS */
input#open-about:checked ~ .boxfenster,
input#open-team:checked ~ .boxfenster,
input#open-ihr-fenster:checked ~ .boxfenster {
margin:0;
background:rgba(0,0,0,.7);
opacity:1;
}
Das eigentliche Fenster ist in der HTML-Datei dann wie folgt unter Einbindung eines Fenster-Schließen-Buttons gestaltet, hier am Beispiel des 'About-Links':
HTML
<div class="schalter">
<input type="checkbox" id="open-about">
<div class="boxfenster">
<div class="boxinhalt">
<label class="button-close" for="open-about"><i class="far fa-window-close"></i></label>
. . . Hier steht der About Text . . .
</div></div></div>
Und so würde es entsprechend für ihr neu anzulegendes Fenster aussehen:
HTML
<div class="schalter">
<input type="checkbox" id="open-ihr-fenster">
<div class="boxfenster">
<div class="boxinhalt">
<label class="button-close" for="open-ihr-fenster"><i class="far fa-window-close"></i></label>
. . . Hier steht der Text fuer ihr neues Fenster . . .
</div></div></div>
