JQuery-Popup-Fenster mit Dimmung. Erstellen Sie ein modales jQuery-Popup-Fenster. Modale jQuery-Fenster

Während wir über verschiedene Techniken zum Erstellen von Websites sprechen, wäre es lächerlich, nicht über einige Möglichkeiten zum Erstellen modaler Fenster zu sprechen. Wir werden nicht auf den Zweck, die Nützlichkeit und die auftretenden Probleme bei der Verwendung von Popup- und modalen Fenstern eingehen. Schauen wir uns nur eines der vielen Beispiele für die Erstellung solcher Fenster an.
Es gibt Situationen, in denen es nicht möglich ist, spezielle Plugins wie und zu verwenden. Daher lohnt es sich zu verstehen, wie Sie eigene Plugins erstellen können.

Mal sehen, wie das geht:

Beginnen wir mit dem Hinzufügen von Tags mit den folgenden Attributen:

• href - #?w=500 gibt die Breite des Fensters an
• rel – eindeutiges Attribut für jedes Fenster
• class="poplight" – Klasse zum Anzeigen eines Popup-Fensters

Siehe Fenster in Aktion – Breite = 500 Pixel

Als nächstes müssen wir ein Inline-Markup für das Popup erstellen. Sie können es an einer beliebigen Stelle auf der Seite platzieren, beispielsweise am Ende des Inhalts. Beachten Sie, dass die Popup-ID mit dem rel-Attribut des Tags übereinstimmt
Dadurch werden der Link und das Popup miteinander verknüpft.

Überschrift

Jeder gewünschte Text

Und so haben wir die Platzierung unseres Fensters auf der Seite herausgefunden, jetzt dekorieren wir es mit Stilen, geben ihm sozusagen ein anständiges Aussehen.

Zur besseren Übersichtlichkeit habe ich einige Erläuterungen zu den Stilparametern unseres Fensters aufgeschrieben. Da Popup-Fenster unterschiedliche Größen haben können, geben wir im CSS popup_block nicht die Ränder des Fensters an; die Berechnung der benötigten Größe ist genau die Aufgabe für .

#fade ( display: none;/*--standardmäßig ausgeblendet--*/ Hintergrund: rgba(7, 87, 207, 0.8); Position: fest; links: 0; oben: 0; Breite: 100 %; Höhe: 100 %; Deckkraft: .80; Z-Index: 9999; ) .popup_block ( Anzeige: keine; /*--standardmäßig ausgeblendet--*/ Hintergrund: #fff; Polsterung: 20 Pixel; Rand: 8 Pixel solides RGB(134, 134, 134); float: links; Schriftgröße: 85 %; Position: fest; oben: 50 %; links: 50 %; Farbe: #000; maximale Breite: 750 Pixel; minimale Breite: 320 Pixel; Höhe: automatisch ; z-index: 99999; /*--CSS3 Box Shadow--*/ -webkit-box-shadow: 0px 0px 20px #000; -moz-box-shadow: 0px 0px 20px #000; box-shadow: 0px 0px 20px #000; /*--CSS3-Eckenrundung--*/ -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; ) .popup_block p ( Schriftgröße: 400; Polsterung: 0; Rand: 0; Farbe: #000; Zeilenhöhe: 1,6;).popup_block h2 ( Rand: 0px 0 10px; Farbe: rgb(43, 43, 43); Schriftstärke: 400; Textausrichtung : center; text-shadow: 1px 1px 2px #0D0C0C; ) /* eine Schaltfläche zum Schließen bilden */ .close ( Hintergrundfarbe: rgba(61, 61, 61, 0.8); Rand: 2px fest #ccc; Höhe: 25px; Zeilenhöhe: 20px; Position: absolut; rechts: -17px; Schriftdicke: fett; Textausrichtung: Mitte; Textdekoration: keine; Polsterung: 0; oben: -17px; Breite: 25px; -webkit-border-radius: 50 %; -moz-Grenzradius: 50 %; -ms-Grenzradius: 50 %; -o-Grenzradius: 50 %; Randradius: 50 %; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; Kastenschatten: 1px 1px 3px #000; ) .close:before ( Farbe: rgba(255, 255, 255, 0.9); Inhalt: „X“; Schriftgröße: 12px; Textschatten: 0 -1px rgba(0, 0, 0, 0.9); ) .close:hover ( Hintergrundfarbe: rgba(252, 20, 0, 0.8); ) .shadow ( box-shadow:4px 4px 10px #857373; -webkit-box-shadow:4px 4px 10px #857373; -moz- box-shadow:4px 4px 10px #857373; padding:0; ) /*--feste Positionierung für IE6--*/ *html #fade ( position: absolute; ) *html .popup_block ( position: absolute; )

Mit der Bildung des Fensters und seiner Aussehen Mit mit CSS Ich denke, es wird keine besonderen Schwierigkeiten geben. Sie können Stile direkt registrieren HTML-Seite, zwischen den und-Tags, oder Sie können es in eine separate Datei Ihrer Stile einfügen, normalerweise ist dies eine style.css-Datei oder so etwas in der Art.

Damit das modale Fenster vollständig funktioniert, müssen Sie jQuery verbinden; diejenigen, die mit der Arbeit dieser Bibliothek nicht vertraut sind, können lesen.

Nun, wir machen weiter. Sie können am meisten tun letzte Version JQuery von der Bibliothekswebsite oder verwenden Sie eine separate Datei, die sich in den Tiefen von Google befindet, und verbinden Sie sie mit dem Dokument. Platzieren Sie im Abschnitt vor dem schließenden Tag die folgende Zeile:

Im nächsten Schritt schauen wir uns die Füllung und Funktionen des Jquery-Plugins zur Aktivierung unseres Popup-Fensters an, der Code enthält einige Erklärungen zum besseren Verständnis unserer Arbeit.

$(document).ready(function())( //Beim Klicken auf einen Link mit Poplight-Klasse und Href-Tag-Attribut mit # $("a.poplight").click(function() ( var popID = $(this).attr("rel"); //den Namen des Fensters abrufen, es ist wichtig, nicht zu vergessen, den zu ändern Name im rel-Attribut des Links beim Hinzufügen neuer var popURL = $(this).attr("href"); //Größe aus dem href-Attribut des Links abrufen //Abfrage und Variablen aus der href-URL-Var-Abfrage = popURL.split("?"); var dim= query.split( "&"); var popWidth = dim.split("="); //erster Wert der Abfragezeichenfolge //Schließen-Schaltfläche zum hinzufügen window $("#" + popID).fadeIn().css(( "width": Number(popWidth) )).prepend(""); //Bestimmen Sie den Rand (margin) für die zentrierte Ausrichtung (vertikal und horizontal) - Wir addieren 80 zur Höhe/Breite und berücksichtigen dabei die in CSS definierte Polsterung + Rahmenbreite. var popMargTop = ($("#" + popID).height() + 80) / 2; var popMargLeft = ($("# " + popID).width() + 80) / 2; //Einrückungswert festlegen $("# " + popID).css(( "margin-top" : -popMargTop, "margin-left" : -popMargLeft ) ); //Fügen Sie einen durchscheinenden, dunkleren Hintergrund hinzu $("body").append(""); //div Der Container wird vor dem Tag aufgelistet. $("#fade").css(("filter" : "alpha(opacity=80)")).fadeIn(); //Ebenentransluzenz, Filter für dummen IE return false; )); //Fenster schließen und Hintergrund ausblenden $(document).on("click", "a.close, #fade", function() ( //Schließen durch Klicken außerhalb des Fensters, d. h. auf den Hintergrund... $( "#fade , .popup_block").fadeOut(function() ( $("#fade, a.close").remove(); //fade out )); return false; )); ));

Höchstwahrscheinlich haben Sie bereits mehr als einmal eine Popup-Meldung im Internet gesehen. Modales Fenster- Anmeldebestätigung, Warnung, Referenzinformationen, Datei-Download und vieles mehr. In diesem Tutorial werde ich mehrere Beispiele zum Erstellen der einfachsten modalen Fenster anbieten.

$(document).ready(function()
{
Alert("Text im Popup-Fenster");
});

Fügen Sie den Code an einer beliebigen Stelle im Hauptteil Ihrer Seite ein. Unmittelbar nach dem Laden der Seite sehen Sie ohne Befehle ein Fenster, das so aussieht:

Der folgende Code wird jedoch ausgeführt, nachdem die gesamte Seite in den Browser geladen wurde. In unserem Beispiel erscheint nach dem Laden der Seite mit Bildern ein einfaches Popup-Fenster:

$(window).load(function()
{
alarm("Seite wurde vollständig geladen!)");
});

Oft sieht man, dass sich in solchen Fenstern die Anmelde- und Registrierungsformulare befinden. Kommen wir zur Sache

Schreiben wir zunächst den HTML-Teil. Wir platzieren diesen Code im Hauptteil Ihres Dokuments.

Aufruf eines modalen Fensters

Modaler Fenstertext
Schließen
Text in einem modalen Fenster.

CSS-Code. Entweder in einer separaten CSS-Datei oder im Head.

Körper(
Schriftfamilie:verdana;
Schriftgröße:15px;
}
.link (Farbe:#fff; Textdekoration:keine)
.link:hover (Farbe:#fff; Textdekoration:unterstrichen)
#maske (
Position:absolut;
links:0;
oben:0;
Z-Index:9000;
Hintergrundfarbe:#000;
Anzeige:keine;
}
#boxes.window (
Position:absolut;
links:0;
oben:0px;
-oben: 40px;
Breite:440px;
Höhe:200px;
Anzeige:keine;
Z-Index:9999;
Polsterung: 20px;
Überlauf versteckt;
}
#Boxen #Dialog (
Breite:375px;
Höhe:203px;
Polsterung:10px;
Hintergrundfarbe:#ffffff;
}
.Spitze(
Position:absolut;
links:0;
oben:0;
Breite:370px;
Höhe:30px;
Hintergrund: #0085cc;
Polsterung: 8px 20px 6px 10px;
}
.schließen(
schweben rechts;
}
.Inhalt(
Polsterung oben: 35px;
}

Im jQuery-Code konzentrieren wir uns auf die Position des modalen Fensters und der Maske, in unserem Fall auf die allmähliche Abdunkelung des Hintergrunds.

Aufmerksamkeit! Vergessen Sie nicht, die Bibliothek im Kopf des Dokuments anzugeben!

Verbindung der Bibliothek über die Google-Website. Nun, der jQuery-Code selbst.

jQuery-Code

$(document).ready(function() (
$("a").click(function(e) (
e.preventDefault();
var id = $(this).attr("href");
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$("#mask").css(("width":maskWidth,"height":maskHeight));
$("#mask").fadeIn(1000);
$("#mask").fadeTo("slow",0.8);
var winH = $(window).height();
var winW = $(window).width();
$(id).css("top", winH/2-$(id).height()/2);
$(id).css("left", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".window .close").click(function (e) (
e.preventDefault();
$("#mask, .window").hide();
});
$("#mask").click(function () (
$(this).hide();
$(".window").hide();
});
});

Modale Fenster sind ein wesentlicher Bestandteil des modernen Webdesigns; mit ihrer Hilfe kann der Entwickler auf die Methode zurückgreifen, eine Schleife auf einer Seite durchzuführen und den Besucher nicht auf sekundäre Seiten umzuleiten. In diesem Tutorial schauen wir uns an, wie Sie mit jQuery und CSS3 tolle modale Fenster mit unscharfen Hintergründen für Ihre Website erstellen. Dank dieser Regeln erzeugen wir beim Erscheinen des Fensters einen unscharfen Hintergrund, der den Blick des Besuchers nur auf die notwendigen Informationen auf der Website lenkt.

Die besten Wirtschaftsnachrichten gibt es nur hier: Drobakha

Die Fensteranimation wird so eingestellt, dass das Fenster von oben nach unten animiert wird, wenn Sie auf die Schaltfläche klicken, um sie anzuzeigen, und die Hintergrundunschärfe automatisch zunimmt.

Wir werden einen Container haben, der Folgendes enthält: Titel, Beschreibung, dann fügen wir eine Klasse für die Schaltfläche mit der toggleModal-Klasse hinzu, um das modale Fenster zu öffnen:

Überschrift

Beschreibung

Tabs sind eine sehr interessante und praktische Sache beim Erstellen einer Website; sie ermöglichen es Ihnen, Informationen richtig zu organisieren und gleichzeitig Platz auf der Website zu sparen.

Dann müssen wir die modale is-active-Klasse hinzufügen. Diese Klasse ist für den Aufruf des modalen Fensters verantwortlich, modal__header ist für den Titel und den Stil des Fensters verantwortlich.

Kommen wir nun zum Styling. Der erste Schritt wird die Schaltflächenklasse sein, die, wie Sie vermutet haben, für die Schaltflächen auf der Website verantwortlich ist. Wir legen die richtigen Anzeigeparameter dafür fest:

Schaltfläche (Hintergrund: keine; Hintergrundclip: Füllfeld; Anzeige: Inline-Block; Rand: 0; Benutzerauswahl: keine; -webkit-touch-callout: keine; -webkit-appearance: Schaltfläche; -webkit-user -select: keine; -moz-user-select: keine; -ms-user-select: keine; )

Container (Position: relativ; Rand: 0 automatisch; maximale Breite: 960 Pixel; Boxgröße: Rahmenbox; Polsterung oben: 40 Pixel;)

Die Stile sind recht einfach, sie werden in einer separaten Datei gespeichert und sollten einem Entwickler, der mindestens einmal mit CSS in Berührung gekommen ist, keine Schwierigkeiten bei der Bearbeitung bereiten.

Unser letzter, aber nicht weniger wichtiger Punkt wird darin bestehen, die automatische Hintergrundunschärfe beim Erscheinen des Menüs sowie die Anklickbarkeit von Links festzulegen. Kleine JS-Regeln helfen uns dabei:

$("body").addClass("is-blurred"); $(".toggleModal").on("click", Funktion (Ereignis) ( event.preventDefault(); $(".modal").toggleClass("is-active"); $("body").toggleClass („ist verschwommen“); ));

Das Ergebnis sind wunderbare modale Fenster, die dem Auge des Betrachters gefallen und Ihr Design nicht überladen.