So rufen Sie ein modales Fenster in HTML an. Einfaches modales Fenster auf CSS ohne JS

3. Beispiel des modalen JQuery-Fensters durch Bezugnahme (mit einer Demo)

Wahrscheinlich haben Sie bereits ein Popup online im Internet gesehen modalfenster - Registrierungsbestätigung, Warnung, Referenzinformationen, Dateien herunterladen und vieles mehr. In dieser Lektion biete ich mehrere Beispiele an, um die einfachsten modalen Fenster zu erstellen.

Erstellen Sie ein einfaches Popup-Modal-Fenster

Wir werden den Code des einfachsten Modalfensters in Betracht ziehen, das sofort angezeigt wird
jQuery-Code

Code-Einlage überall in körper. Deine Seite. Unmittelbar nach dem Herunterladen der Seite, ohne Befehle, sehen Sie das nächste Fenster:

Der folgende Code wird jedoch nach dem Laden der gesamten Seite im Browser ausgeführt. In unserem Beispiel wird nach dem Laden einer Seite mit Bildern ein einfaches Popup-Fenster angezeigt:

Anruf des Modal-JQuery-Fensters anhand der Referenz mit CSS

Der nächste Schritt wird die Schöpfung sein modales Fenster Wenn Sie auf den Link klicken. Der Hintergrund wird langsam dimmen.

Sie können oft sehen, dass sich das Eingabe- und Anmeldeformular in solchen Fenstern befinden. Wir fangen an zu arbeiten

Zu starten, schreiben hTML-Teil.. Dieser Code wird in den Körper Ihres Dokuments gelegt.

Rufen Sie ein modales Fenster an

CSS-Code. Entweder in einer separaten CSS-Datei oder in
Im JQuery-Code konzentriert sich die wichtigste Aufmerksamkeit auf die Position des Modalfensters und der Maske, in unserem Fall ein allmählicher dimer Hintergrund.

Beachtung! Vergessen Sie nicht, die Bibliothek in den Kopf des Dokuments anzuschließen!

Anschließen einer Bibliothek von Google. Nun, direkt den JQuery-Code selbst.

JQuery-Code

Hallo zusammen! In dieser kleinen Klasse erstellen wir ein einfaches, aber leistungsstarkes modales Fenster auf reinem CSS. Und gleichzeitig wiederholen wir (und für wen ich öffnen werde) eine solche nützliche Sache als Flexbox. Gleichzeitig erstellen wir nicht nur ein modales Fenster, das durch Anklicken öffnet, und das genau in der Mitte des Bildschirms positioniert ist. Einmal konnte es nur mit erfolgen verwenden von JavaScriptAber Zeit vergeht und jetzt kann es mit wörtlich 4 Codezeilen erfolgen.

Offenes modales Fenster öffnen

Das gesamte Modalfenster besteht aus zwei Ebenen - der ersten Ebene, die eine Klasse hat ModalWindow., dunkelt den gesamten Speicherplatz um das Modal-Fenster und richtet den Inhalt des Fensters in der Mitte des Bildschirms aus. Zweite Ebene - Klasse Modal_body. - Enthält den Inhalt des Modal-Fensters selbst direkt.

Erstellen Sie nun einen CSS-Code für dieses Markup:

Modal (Position: Fixed; Anzeige: Keine; oben: 0; rechts: 0; unten: 0; links: 0; Z-Index: 0; Hintergrund: RGBA (0,0,0,0,0,0,7); Zeiger -Events: keine;) .modal: Ziel (Anzeige: Flex; Zeigerereignisse: auto;) .modal_body (Position: relativ; Z-Index: 2; Anzeige: Block; Rand: Auto; Polsterung: 15px; Hintergrund: # FFF;). Modalfull (Position: absolut; Anzeige: Block; Z-Index: 0; Breite: 100%; Höhe: 100%;)

Schauen wir uns die Arbeit des modalen Fensters an und erkennen an, wie es funktioniert.

Wenn Sie sehen, klicken Sie, wenn Sie auf "Modal-Fenster öffnen" klicken, das Fenster schattiert das Fenster, und das weiße Modal-Fenster erscheint genau in der Mitte. Auf diese Weise bis wir aufhören und sich die Theorie widmen.

Da wir vereinbart haben, JavaScript nicht zu verwenden und nicht mit der Hilfe zu verwenden. Durch Drücken der Elemente können wir es leicht mit Hilfe von CSS-Pseudo-Klassen und Ankerlinks mit Hash tun (um einen Artikel auf dieser Seite anzugeben) und ich würde Mit einem Wert, der dem Zeiger in der Verbindung gleich sein muss. Schau dir unser Beispiel an: href Links I. ich würde Der Hauptbehälter des Modal-Fensters hat den gleichen Wert - ModalWindow.. Dies ist wichtig, weil der Browser verstehen muss, welche Elemente miteinander interagieren werden.

In unserem Fall ist der allgemeine Container des Modalfensters ausgeblendet, und dementsprechend ist der gesamte Inhalt des Modalfensters ausgeblendet. Wenn Sie jedoch auf den Link klicken, erhält das Element eine Pseudoklasse : Ziel. Und entspricht dementsprechend. Schauen Sie sich den CSS-Code an - Eigenschaft anzeige Änderungen S. keiner auf der biegen. Beachten Sie, dass flexibel, denn mit der Hilfe können wir uns ausrichten können Modal_body. Genau zentrierter Bildschirm. Alle anderen Styles, die wir sofort für ihn registriert haben.

Wenn Sie es übrigens nicht ganz verstehen, wie es überall auf der gesamten Oberfläche des Bildschirms abgeflacht ist, erzähle ich - das Ganze in den folgenden 4 sitzt:

Oben: 0; Rechts: 0; Unten: 0; links: 0;

Wir haben darauf hingewiesen, dass es auf der rechten Seite, links, oben und unten gleichzeitig in einem Nullpixel auf der rechten Seite sein sollte. Stattdessen können Sie zum Beispiel eine solche Erhaltung verwenden:

Breite: 100%; Höhe: 100VH;

Hier geben wir eine Breite von 100% des Bildschirms an, aber die Höhe ist besser, um mit zu installieren ansichtsfensterhöhe. - Die Höhe des Browserfensters. Ich werde auf meiner Version aufhören.

Eine weitere wichtige Nuance ist der Wert der Z-Index-Eigenschaft Modal und Modal_body.. Sie müssen notwendigerweise sein und Modal_body. Es muss notwendigerweise mindestens eine Einheit sein, da der Inhalt des Modal-Fensters ansonsten nicht verfügbar ist - Links und Tasten können nicht gedrückt werden. Und wenn dort ein Scrollgehalt vorhanden ist, funktioniert er nicht, da ein Element den anderen überlappt.

Wir werden Ihr Meisterwerk weiter erstellen. Wenn Sie klicken, erscheint das Modal-Fenster, aber wir können es nicht einfach schließen. Fügen Sie einen Button hinzu, um es zu schließen:

Eigentlich storniert sie : Ziel. Für unser modalem Fenster nimmt es einfach die Ausgangsposition - sich aus dem Auge verstecken. Mit dieser Referenz gibt es jedoch eine Subtlety - wenn es gedrückt wird, wird der Browser versucht, ein solches Element zu finden, aber erleidet Fiasco und wird die Seite auf den Anfang. Dieses Verhalten ist einer der kleinen Minuten eines solchen Ansatzes an die Herstellung von modalen Fenstern, aber es kann damit umgehen.

Für dieses Attribut href Referenzen, mit denen wir uns ändern «#» auf der "#Modalwindowclose"und die Link-Taste, die das Fenster geöffnet hat, fügen ein Attribut hinzu ich würde C die gleiche Bedeutung. Sie können das Attribut verwenden name.In HTML5 ist jedoch der Anker besser und erforderlich, um das Attribut anzuzeigen ich würde.

Offenes modales Fenster öffnen

Durch das Drücken des Browsers wird der Browser jetzt wieder auf den Knopf gerechnet. Um der Wahrheit zu willen, möchte ich sagen, dass sich dieser Anker an der oberen Kante des Bildschirms befindet. Wenn sich diese Taste zum Öffnen in Header- oder Fußzeile befindet, ist dieses Problem nivelliert. Wenn der Header eine feste Position hat, ist es überhaupt großartig - beispielsweise, um einen Rückruf oder eine Vorbestellung / Konsultation zu bestellen, es ist gut und beim Schließen des Fensters.

Hier ist ein Beispiel für das, was wir getan haben:

Sie können den Container weiter modifizieren Modal_body. - Dies sind Einschränkungen in der Größe (so dass es die Höhe und Breite nicht austrocknet). Und eine weitere kleine Nuance - ich empfehle den Code mit einem modalen Fenster, wann immer möglich, vor dem Schluss-Tag sitzen.

So können Sie ein modales Fenster schnell erstellen. Dieser Code, den wir geschrieben haben, können in der Basisversion verwendet werden, indem Sie nach Bedarf die erforderlichen Stile hinzufügen.

Ich hoffe, meine Lektion war für Sie nützlich. Guten Tag für Sie und vor dem neuen Treffen auf den Webinseln!

Ein einfaches modales Fenster für die Website kann mit nur HTML- und CSS-Code ohne Verwendung von Skripts erfolgen. Immerhin geben eine große Anzahl von Skripten natürlich die Belastung der Site und verlangsamt seine Arbeit.
Alternativ sehen Sie sich dieses einfache modale Fenster an. Mindestcode, aber ganz gut. Natürlich wird es nicht in den Modul Jquery Modal Windows steigen, aber trotzdem.

CSS. Code, der wünschenswert ist, um in das Stilblatt einzulegen, normalerweise ist es style.css

/ * Stilstile * / .Window (Position: Fixed; oben: 0; rechts: 0; unten: 0; links: 0; Hintergrund: RGBA (0,0,0,0,0,0,7); Z-Index: 99999; -Webkit -Transition: Deckkraft 400ms Ease-In; -Moz-Übergang: Deckkraft 400ms Ease-In; Übergang: Deckkraft 400ms Ease-In; Anzeige: Keine; Zeigerereignisse: Keine;) .window: Ziel (Anzeige: Block; Zander Ereignisse: auto;) .window\u003e div (Breite: 300px; Position: relativ; Rand: 10% Auto; Polsterung: 20px; Borderradius: 5px; Hintergrund: # F2F2F2; Kastenschatten: 0px 0px 20px 2px ;). Close (Hintergrund: # CC3300; Farbe: #FFFFFFFF; Linienhöhe: 25px; Position: absolut; rechts: -12px; Text-ALIGN: Center; oben: -10px; Breite: 24px; Textdekoration: Keine ; font- weight: bold; -webkit-Border-Radius: 12px; -moz-border-radius: 12px; Border-Radius: 12px; -moz-box-shadow: 1px 1px 3px # 000; -webkit-Box-Shadow : 1PX 1PX 3PX # 000; Box-Shadow: 1PX 1PX 3PX # 000;) .close: Hover (Hintergrund: # 990000;) / * Ende der Stile * /

Stellen Sie die Breite des Modalfensters ein, indem Sie die Größe der Breite auf den gewünschten Ändern ändern. In dem Code wird dieser Ort festgestellt.

Nun, der HTML-Code, der an der richtigen Stelle gestellt wird. Dies ist im Wesentlichen ein Hinweis auf die Eröffnung von Modali.

Link Text

Beispiel

Installieren eines einfachen modalen Fensters in WordPress

Die Verwendung des modalen Fensters in WordPress ist praktisch nicht anders als der oben beschriebene. Sie können hinzufügen, dass zum Beispiel ein Shortcode hinzugefügt werden kann feedback Plugin CF-7.

Wenn Sie Moderal nicht in der Veröffentlichung platzieren müssen, jedoch in den Vorlagendateien, dann einfach eingeben hTML Quelltext In der gewünschten Platzvorlage.

Einfach auf dem FUNKTIONS-Modal-Fenster, das vollständig auf reinen CSS ausgeführt wird, in dem Sie verschiedene Funktionen für einen Anruf an der Site angeben können. Wahrscheinlich ist dies eine von vielen, die ich aus der Auswahl des modalen Fensters in Bezug auf seine Prostata-Einstellungen erfüllt habe, sondern auch auf der Installation. Aber die Hauptsache ist seine Funktionalität, die anderen nicht aufgeben wird. Es erfolgt auch standardmäßig unter leichte TönungWo der Knopf ist, ist die Form der gekreuzten Form in der oberen rechten Ecke installiert.

Welches wird zur Reisefunktion oder einfach, so dass der Rahmen verschwindet, so dass auch an diesem kleinen Element die Farbpalette auswirkt. Nun kann der Webmaster auf der Website gestellt und eine Beschreibung oder Bediener darin platzieren, die verschiedene Kategorien als Statistiken oder Informer ausgeben können.

Tatsache ist jedoch, wenn Sie einen dunklen Stil der Ressource haben, dann können Sie im Stil den Bereich schnell ändern oder riesig unter das ursprüngliche Design passen. Hier ist einer von standardmethoden So erstellen Sie Clean CSS in das Modal-Fenster, das beginnt, wenn Sie unter dem Link mit der HTML-Bindung auf die Schaltfläche klicken. Die Schaltfläche selbst ist mehr für die Sichtbarkeit, wo im Stil des Entfernens einer Klasse und des Namens der Name sein wird, der sowohl auf Navigations- als auch für das Bedienfeld geliefert werden kann, in dem sich die Hauptfunktionalität oder Navigationsseite befindet.

Dies ist, wenn Sie überprüfen, ob alles gut funktioniert:

Installation:

Fenster mit Knopf

CSS.

Butksaton-Satokavate (
Anzeige: Inline-Block;
Textdekoration: Keine;
Margin-Right: 7px;
Borderradius: 5px;
Polsterung: 7px 9px;
Hintergrund: # 199A36;
Farbe: # FBF7F7! WICHTIG;
}

Anelumen (
Anzeige: Flex;
Position: Fixiert;
links: 0;
Top 100%;
Breite: 100%;
Höhe: 100%;
Ausrichten-Gegenstände: Zentrum;
Rechtfertigungsinhalt: Center;
Deckkraft: 0;
-Webkit-Übergang: Top 0s .7s, Deckkraft .7s 0s;
Übergang: Top 0s .7s, Deckkraft .7s 0s;
}

Anelumen: Ziel (
Oben: 0;
Deckkraft: 1;
-Webkit-Übergang: Keine;
Übergang: NONE;
}

Anelumenfigur (
Breite: 100%;
Max-Breite: 530px;
Position: relativ;
Polsterung: 1.8em;
Deckkraft: 0;
Hintergrundfarbe: weiß;
-Webkit-Übergang: Deckkraft .7s;
Übergang: Deckkraft .7s;
}

Anelumen.LowNuska Figur (
Hintergrund: # F9F5F5;
Borderradius: 7px;
Padding-Top: 8px;
Border: 3px solide #aaabad;
}

Anelumen.launennuska figur h2 (
Margin-Top: 0;
Padding-Bottom: 3Px;
Grenzboden: 1px fest # DCD7D7;
}

Anelumen: Zielfigur (
Deckkraft: 1;
}

Anelumen.launennuska .compatibg-ucasticyWise (
Textdekoration: Keine;
Position: absolut;
Rechts: 8px;
Oben: 0px;
Schriftgröße: 41px;
}

Anelumen .nedmiseig (
links: 0;
Oben: 0;
Breite: 100%;
Höhe: 100%;
Position: Fixiert;
Hintergrundfarbe: RGBA (10, 10, 10, 0,87);
Inhalt: "";
Cursor: Default;
Sichtbarkeit: verborgen;
-Webkit-Transosition: Alle .7s;
Übergang: Alle .7s;
}

Anelumen: Ziel. JaNismiseg (
Sichtbarkeit: sichtbar;
}

Sie müssen auch wissen, dass die Stilistik von CSS und der Pseudoclass ein der von den CSS-Funktionen nicht vollständig genutzten Personen mit vielen interessanten potenziellen Anwendungen verwendet werden.

Es beginnt, wann URL-Adresse Seiten erfüllen die Kennung an Ihr Element oder können anders ausgedrückt werden, wenn der Benutzer auf einem bestimmten Element auf der Seite springt.

Modal Windows - ein häufig verwendetes Werkzeug im Arsenal des Web-Masters. Es ist sehr erfolgreich für die Lösung große Zahl Aufgaben, z. B. die Ausgabe von Anmeldeformularen, Werbeblöcken, Nachrichten usw.

Trotz des wichtigen Ortes in der Informationsunterstützung des Projekts werden in der Regel modale Fenster in JavaScript implementiert, die Probleme beim Erweitern der Funktionalität oder umgekehrter Kompatibilität erstellen können.

Mit HTML5 und CSS3 können Sie modale Fenster mit außergewöhnlicher Leichtigkeit erstellen.

HTML-Markup.

Der erste Schritt zum Erstellen eines modalen Fensters ist einfach und effizient Markup:

Offenes modales Fenster öffnen

Innerhalb des Div-Elements der Inhalt des Modal-Fensters wird platziert. Sie müssen auch einen Link organisieren, um das Fenster zu schließen. Stellen Sie beispielsweise einen einfachen Titel und mehrere Absätze auf. VollmarkUp für unser Beispiel wird so aussehen:

Offenes modales Fenster öffnen

Styles

Eine Klasse erstellen modaldialog. Und fange an zu bilden aussehen:

Modaldialog (Position: Fixed; Schriftfamilie: Arial, Helvetica, Sans-Serif; Top: 0; rechts: 0; unten: 0; links: 0; Hintergrund: RGBA (0,0,0,0,8); z -Index: 99999; -Webkit-Übergang: Deckkraft 400ms Leichtigkeit; -Moz-Übergang: Deckkraft 400ms Ease-In; Übergang: Deckkraft 400ms Leichtigkeit; Anzeige: keine; Zeigerereignisse: Keine;)

Unser Fenster verfügt über eine feste Position, das heißt, wenn Sie die Seite mit einem offenen Fenster blättern. Außerdem wird unser schwarzer Hintergrund auf dem gesamten Bildschirm erweitert.

Der Hintergrund hat eine kleine Transparenz und befindet sich auch auf allen anderen Elementen, indem sie die Immobilie verwenden. z-Index..

Am Ende setzen wir die Übergänge, um unser Modal-Fenster auszugeben und in einem inaktiven Zustand zu verbergen.

Vielleicht kennst du das Eigentum nicht zeigerereignisse.Sie können jedoch steuern, wie Elemente auf die Maustaste gedrückt werden. Wir setzen den Wert des Wertes für den Unterricht ein modaldialog., da der Link nicht auf das Drücken der Maustaste antworten soll, wenn die Pseudo-Klasse aktiv ist ": Ziel".

Fügen Sie nun eine Pseudoklasse hinzu : Ziel. Und Stile für ein modales Fenster.

MODALDIALOG: Ziel (Anzeige: Block; Zeiger-Ereignisse: auto;) .modaldialog\u003e div (Breite: 400px; Position: Relativ; Rand: Marge: 10% Auto; Polsterung: 5px 20px 13px 20px; Borderradius: 10px; Hintergrund: # FFF; Hintergrund: -Moz-Linear-Gradient (#fff, # 999); Hintergrund: -Webkit-linearer Gradient (#fff, # 999); Hintergrund: -O-linear-Gradienten (#fff, # 999); )

Pseudoklasse ziel. Ändert den Ausgabemodus des Elements, sodass unser Modal-Fenster angezeigt wird, wenn Sie auf den Link klicken. Wir ändern auch den Wert der Immobilie. Zeigerereignisse..

Wir definieren die Breite des Modalfensters und Position auf der Seite. Wir bestimmen auch den Gradienten für den Hintergrund und die abgerundeten Ecken.

Schließe das Fenster

Jetzt müssen Sie die Fensterschließfunktionalität implementieren. Wir bilden das Erscheinungsbild der Schaltfläche:

Schließen (Hintergrund: # 606061; Farbe: #FFFFFFF; Linienhöhe: 25px; Position: absolut; rechts: -12px; Text-ALIGN: Center; oben: -10px; Breite: 24px; Textdekoration: Keine; font- Gewicht: Fett; -Webkit-Border-Randelradius: 12px; -Moz-Border-Radius: 12px; Border-Radius: 12px; -moz-Box-Schatten: 1px 1px 3Px # 000; -Webkit-Box-Schatten: 1Px 1px 3Px # 000; Kastenschatten: 1px 1px 3Px # 000;). Runden: Schwebe (Hintergrund: # 00D9ff;)

Für unseren Knopf setzen wir den Hintergrund und die Position des Textes ein. Dann positionieren wir den Knopf, wir machen es mit den Routing-Eigenschaften des Rahmens runden und bilden einen leichten Schatten. Wenn Sie den Mauszeiger bewegen, ändern wir den Farbhintergrund.