1. Modalt vindu på jQuery «Simple Modal Box» 2. jQuery-plugin «LeanModal»

Vise innhold i modale vinduer. For å se plugin i aksjon på demosiden, klikk på lenken: Registreringsskjema eller Grunnleggende innhold.

3. jQuery-plugin "ToastMessage"

Popup-meldinger. Plugin kommer i to versjoner. I ett tilfelle forsvinner meldinger av seg selv etter en viss tid, i den andre implementeringen, for å lukke en melding, må du klikke på en knapp.

4. Innhold som dukker opp i et modalt vindu

Plugin "Reveal". For å se plugin-en i aksjon, klikk på "Fire A Reveal Modal"-knappen på demosiden.

5. Søte dialogbokser

Klikk på krysset på demosiden for å se plugin-en i aksjon.

6. Mootools modalt vindu, "MooDialog" plugin 7. jQuery popup-panel på toppen av skjermen 8. jQuery popup-vindu

jQuery-plugin for skjemavisning tilbakemelding i et popup-vindu.

10. MooTools-plugin "LightFace" for implementering av Facebook-dialogbokser

Dialogbokser i Facebook-stil. I tillegg til statisk informasjon kan du plassere bilder, rammer, Ajax ber om. Mange innstillinger for hvordan plugin-en fungerer, et veldig kraftig verktøy. Ser veldig stilig og funksjonell ut. Følg lenkene på demosiden for å se eksempler med forskjellig innhold.

11. jQuery modalt vindu

En pen popup-dialog i jQuery.

12. jQuery modale vinduer

Søte pop-up modale vinduer. Tre stiler. Demosiden inneholder 3 lenker for å åpne vinduer.

13. jQuery modale vinduer

Pop-up modale vinduer av flere typer. For å se plugin i aksjon, klikk på lenken på demosiden.

15. Melding som dukker opp øverst på siden

Meldingen vises øverst på siden, som igjen er nedtonet. Klikk på "Klikk meg" på demosiden for å se en popup-melding. Ved å klikke på krysset lukkes det. Implementert ved hjelp av jQuery.

16. Modalt vindu "ModalBox" i javascript

Implementer moderne modale dialoger uten å bruke popup-vinduer og sideinnlastinger. På demosiden klikker du på "Start Demo"-knappen for å se skriptet i aksjon.

17. "Leightbox"-plugin som bruker Prototype-biblioteket

Plugin for visning av innhold i modale vinduer.

Mens vi snakker om ulike teknikker for nettstedbygging, ville det være latterlig å ikke snakke om noen måter å lage modale vinduer på. Vi vil ikke diskutere formålet, nytten og nye problemer ved bruk av popup-vinduer og modale vinduer. La oss se på bare ett av de mange eksemplene på å lage slike vinduer.
Det er situasjoner når det ikke er mulig å bruke spesielle plugins, for eksempel og, så det er verdt å forstå hvordan du kan lage dine egne.

La oss se hvordan du gjør dette:

HTML

La oss starte med å legge til tagger med følgende attributter:

• href - #?w=500 indikerer bredden på vinduet
• rel – unikt attributt for hvert vindu
• class="poplight" – klasse for å vise et popup-vindu

< a href= "#?w=500" rel= "popup_name" class = "poplight" >Se Vindu i aksjon – Bredde = 500 piksler

Se Vindu i aksjon – Bredde = 500 piksler

Deretter må vi lage inline-markering for popup-vinduet. Du kan plassere den hvor som helst på siden, for eksempel nederst i innholdet. Merk at popup-ID-en samsvarer med rel-attributtet til taggen
Dette vil koble lenken og popup-vinduet sammen.

Overskrift

Enhver tekst du ønsker

Og så har vi funnet ut plasseringen av vinduet vårt på siden, la oss nå dekorere det med stiler, gi det, så å si, et anstendig utseende.

CSS-oppsett

For større klarhet har jeg skrevet ned noen forklaringer for stilparametrene til vinduet vårt. Siden popup-vinduer kan ha forskjellig størrelse, spesifiserer vi ikke kantene på vinduet i CSS popup_block å beregne den nødvendige størrelsen er nøyaktig oppgaven for .

#fade ( display : ingen ; /* --misligholde skjult--*/ bakgrunn: rgba (7, 87, 207, 0,8);

#fade (visning: ingen;/*--skjult som standard--*/ bakgrunn: rgba(7, 87, 207, 0.8); posisjon: fast; venstre: 0; topp: 0; bredde: 100%; høyde: 100%; opasitet: .80; z-indeks: .popup_block (display: ingen; /*--skjult som standard--*/ bakgrunn: #fff; utfylling: 20px; border: 8px solid rgb(134, 134 , 134); skygge: 0px 20px #000; -moz-box-shadow: 0px 20px #000; -radius: 12px; border-radius: 0px; margin: 000 linjehøyde: 1.6;) .popup_block h2 ); font-weight: 400; text-align: 1px 2px ;

kantlinje: 2px solid #ccc; høyde: 25px; linjehøyde: 20px; posisjon: absolutt; høyre: -17px; font-weight: fet; tekst-align: center;

tekst-dekorasjon: ingen;polstring: 0;

topp: -17px;

bredde: 25px; -webkit-border-radius: 50%; JQuery fra bibliotekets nettsted, eller bruk en separat fil som ligger i dypet av Google, koble den til dokumentet, i delen før den avsluttende taggen, og plasser følgende linje:

I neste trinn skal vi se på fyllingen og funksjonene jquery-plugin, for å aktivere popup-vinduet vårt, inneholder koden noen forklaringer for å bedre forstå hva vi gjør.

JQuery-plugin

$(dokument) . ready(function () ( //Når du klikker på en lenke med poplight-klasse og href-tag-attributt med # $("a.poplight" ) . click(function () ( var popID = $(this) . attr("rel" ); //få navnet på vinduet, det er viktig å ikke glemme når du legger til nye å endre navnet i rel-attributtet til link var popURL = $(this) attr(" href" ); = spørring[ 1 ] delt ("&" ) ; var popWidth = dim[ 0 ] ; "#" + popID) css(( "width" : Number( popWidth ) ) . prepend("" ) ; //Bestem margen (margin) for senterjustering (vertikalt og horisontalt) - vi legger til 80 til høyden/bredden , tar hensyn til utfyllingen + rammebredden definert i css var popMargTop = ($ ("#" + popID) . height() + 80 ) / 2 ; var popMargLeft = ($("#" + popID) . width(; ) + 80 ) / 2 ; //Angi innrykkverdien $("#" + popID) css(("margin-top": - popMargTop, "margin-left" : - popMargLeft ) ;

//Legg til en gjennomskinnelig mørkere bakgrunn $("body" ) . append(""); med # $("a.poplight").click(function() ( var popID = $(this).attr("rel"); //få navnet på vinduet, er det viktig å ikke glemme å endre navn i rel-attributtet til lenken når du legger til nye var popURL = $(this).attr("href"); //hent størrelsen fra href-attributtet til lenken //query og variabler fra href url var query= popURL.split("?"); "&"); var popWidth = dim.split("="); ).fadeIn().css(( "width": Number(popWidth)).prepend(""); //Bestem margen (margin) for senterjustering (vertikalt og horisontalt) - vi legger til 80 til høyden / bredden , tar hensyn til utfyllingen + rammebredden definert i css var popMargTop = ($("#" + popID).height() + 80) / 2; var popMargLeft = ($("#" + popID).width( ) + 80) / 2; //Angi innrykkverdien $("# " + popID).css(("margin-top" : -popMargTop, "margin-left" : -popMargLeft )); mørkere bakgrunn $("body").append(""); //div beholderen vil bli oppført før taggen.

$("#fade").css(("filter" : "alpha(opasitet=80)")).fadeIn(); //layer translucency, filter for dum IE returner false;

));
//Lukk vinduet og vis bakgrunn $(document).on("klikk", "a.close, #fade", function() ( //lukk ved å klikke utenfor vinduet, dvs. på bakgrunnen... $( "#fade , .popup_block").fadeOut(function() ( $("#fade, a.close").remove(); //fade ut jevnt )); ));

Konklusjon:

Generelt, hvis du ikke går inn i ugresset og ikke belaster deg selv med unødvendig kode gobbledygook, er vårt fantastiske modale vindu klar til å fungere, og venter på at tankene dine blir oversatt til tekst, eller annen nyttig informasjon.
For de som ønsker å bruke et modalt vindu for å plassere videoer eller store bilder i det, anbefalte jeg fortsatt å bruke spesielle plugins som , siden eksemplet ovenfor på et modalt vindu er ment mer for lett og ikke veldig tung informasjon, selv om dette er ikke et problem om ønskelig.

Neste gang vil jeg definitivt fortelle deg det og vise deg et eksempel, og sikkert vil mange være interessert i å lære om andre tredjepartsobjekter i popup-vinduet. Så ikke gå deg vill på nettet og følg med!

Oppdatering: Versjon dm-modal.js v1.3 (15.01.2017)

Ganske ofte kan du finne modale vinduer på nettsider, og de brukes alle til forskjellige oppgaver. Faktisk er dette et ganske kraftig verktøy som lar deg gjøre nettstedets grensesnitt mer interaktivt og praktisk. Modale vinduer kan for eksempel brukes til ulike skjemaer, som autorisasjonsskjema, tilbakemeldingsskjema, bestilling av et produkt, og man vet aldri.

I dette innlegget skal vi se på et eksempel på hvordan man lager et enkelt modalt vindu ved hjelp av JQuery og CSS. Det særegne med dette eksemplet er at det ikke er nødvendig, vel, med unntak av selve JQuery-biblioteket.

Plasser den modale vinduskoden på siden:

lukk Åpne modalt vindu

Som du kan se fra markeringen, er blokken til selve modalvinduet en div med id=-attributtet modal_form som inneholder et span-element med id= modal_close. Dette elementet vil tjene som en knapp for å lukke det modale vinduet, i tillegg, under blokken er det en div-blokk med id=-attributtet overlegg, som også tjener til å mørkere bakgrunnen. Modalvinduet vil bli åpnet med lenke, med klassen modal.

CSS for modalt vindu

#modal_form ( bredde: 300px; høyde: 300px; kantradius: 5px; kantlinje: 3px #000 solid; bakgrunn: #fff; posisjon: fast; topp: 45 %; venstre: 50 %; margin-top: -150px; margin-venstre: -150px; display: ingen: 0px 10px ) #modal_form #modal_close overlegg ( z-index:3; posisjon:fast; bakgrunnsfarge:#000; opasitet:0.8; -moz-opacity:0.8; filter:alpha(opacity=80); width:100%; top:0; cursor: ingen)

Til modal_form vi satte en fast bredde og høyde og sentrerte deretter posisjonen til midten av skjermen. For den modale vindubakgrunnen ( overlegg) setter vi størrelsen slik at den passer til bredden på skjermen, fyller med gjennomsiktighet og skjuler den som standard. Spesielt øyeblikk med z-indeks, skal modalen ha det største av alle elementene på siden, og omslaget skal ha det største av alle elementer bortsett fra selve modalen.

Nå til det mest grunnleggende, dette er javascript-koden. To hovedhendelser vil bli brukt for det modale vinduet: dets åpning - å klikke på et element med klassen modal, i vårt tilfelle er dette en lenke, og du lukker det modale vinduet med et klikk på dekselet ( overlegg), eller klikk på lukkeknappen, i vårt tilfelle er dette et span-element med id= modal_close.

$(document).ready(function() ( $(".modal").click(function(event)( event.preventDefault(); $("#overlay").fadeIn(400, // animere visningen av cover-funksjonen ()( // vis deretter mod-vinduet $("#modal_form") .css("display", "block") .animate((opasitet: 1, topp: "50%"), 200); )); )); // lukker det modale vinduet $("#modal_close, #overlay").click(function())( $("#modal_form") .animate((opasitet: 0, topp: "45% "), 200, // reduser gjennomsiktighetsfunksjonen())( // etter animasjonen $(this).css("display", "none"); // skjul vinduet $("#overlay").fadeOut (400); // skjul bakgrunnen ) ));

Ved å bruke animate endrer vi den vertikale posisjonen topp, samt åpenhet opasitet, og med dette får vi en interessant effekt. En lignende effekt brukes både når du åpner et vindu og når du lukker det. Forskjellen er at rekkefølgen som egenskapene brukes på blokkene endres, og dermed visualiseres åpning og lukking av vinduet.

Modale vinduer er en integrert del av moderne webdesign med deres hjelp, utvikleren kan ty til metoden for å sløyfe på én side og ikke omdirigere besøkende til sekundære sider. I denne opplæringen skal vi se på hvordan du lager fantastiske modale vinduer med uskarp bakgrunn for nettstedet ditt ved å bruke jQuery og CSS3. Takket være disse reglene vil vi lage en uskarp bakgrunn når vinduet dukker opp, som vil binde besøkendes øye kun til nødvendig informasjon på nettsiden.

Modale vinduer med uskarp bakgrunn i CSS3

Den beste økonomiske nyheten er bare her: Drobakha

Vindusanimasjonen vil bli satt på en slik måte at når du klikker på knappen for å vises, vil vinduet animere fra topp til bunn, og bakgrunnsuskarphet vil automatisk øke.

Trinn 1. HTML

Vi vil ha en beholder som vil inneholde: tittel, beskrivelse, så legger vi til en klasse for knappen med toggleModal-klassen for å åpne modalvinduet:

Overskrift

Beskrivelse

Åpne artikkeltittel for vindu

Faner er en veldig interessant og praktisk ting når du lager et nettsted, de lar deg organisere informasjon på riktig måte, samtidig som du sparer plass på nettstedet.

Lukke

Deretter må vi legge til modal is-active-klassen, denne klassen vil være ansvarlig for å kalle det modale vinduet, modal__header er ansvarlig for tittelen og stilen til vinduet.

Trinn 2: CSS

La oss nå gå videre til styling, det første trinnet vil være knappeklassen, som vil være ansvarlig, som du gjettet, for knappene på nettstedet, vi setter de riktige visningsparametrene for den:

Knapp ( bakgrunn: ingen; bakgrunnsklipp: utfyllingsboks; display: inline-blokk; kantlinje: 0; brukervalg: ingen; -webkit-touch-callout: ingen; -webkit-utseende: knapp; -webkit-bruker -velg: ingen; -moz-bruker-velg: ingen;

Beholder (posisjon: relativ; margin:0 auto; maks. bredde: 960px; boksstørrelse: kantboks; polstring-topp: 40px; )

artikkel ( bakgrunn: #fff; polstring: 20px; margin-bunn: 40px; border-radius: 5px; ) .modal (skjerm: ingen; posisjon: fast; topp: 50%; bredde: 100%; høyde: auto; margin -topp: -150px; bakgrunnsfarge: $farge-hvit: 999; boks-skygge: 0px venstre: -260px; maks-bredde: 520px; darken($color-bg, 5% ) .modal__footer (tekstjustering: senter; knapp (display: inline-block; ) )

Stilene er ganske enkle, de er lagret egen fil og bør ikke forårsake vanskeligheter når du redigerer dem for en utvikler som minst en gang har støtt på CSS.

Trinn 3. JS

Vår siste, men ikke mindre viktige, vil være å stille inn den automatiske bakgrunnsuskarphet når menyen vises, samt klikkbarheten til lenker, små JS-regler vil hjelpe oss med dette:

$("body").addClass("er uskarpt"); $(".toggleModal").on("klikk", funksjon (hendelse) ( event.preventDefault(); $(".modal").toggleClass("is-active"); $("body").toggleClass ("er uskarpt");

Resultatet er fantastiske modale vinduer som er behagelige for seerens øye og som ikke roter til designet ditt.

3. Eksempel på et jQuery-modalt vindu kalt fra en lenke (fra Demo)

Mest sannsynlig har du allerede sett et popup-modalt vindu på Internett mer enn én gang - registreringsbekreftelse, advarsel, bakgrunnsinformasjon, nedlasting av filer og mye mer. I denne opplæringen vil jeg gi flere eksempler på hvordan du lager de enkleste modale vinduene.

Opprette et enkelt popup-modalt vindu La oss begynne å se på koden for et enkelt modalt vindu som umiddelbart vises
jQuery-kode

$(document).ready(function()
{
alert("Tekst i popup-vindu");
});

Lim inn koden hvor som helst i brødteksten på siden din. Umiddelbart etter at siden er lastet, uten noen kommandoer, vil du se et vindu som ser slik ut:

Men følgende kode vil bli utført etter at hele siden er lastet inn i nettleseren. I vårt eksempel, etter å ha lastet siden med bilder, vil et enkelt popup-vindu dukke opp:

$(window).load(function()
{
alert("Siden har fullført lasting!)");
});

Kalle opp et jQuery modalt vindu fra en lenke med CSS Neste trinn er å lage et modalt vindu når koblingen klikkes. Bakgrunnen blir sakte mørkere.

Du kan ofte se at innloggings- og registreringsskjemaene ligger i slike vinduer. La oss komme i gang

La oss først skrive html-delen. Vi plasserer denne koden i hoveddelen av dokumentet.

Kaller et modalt vindu

Modal vindu tekst
Lukke
Tekst i et modalt vindu.

CSS-kode. Enten i en egen css-fil, eller i hodet.

kropp (
font-family:verdana;
font-size:15px;
}
.link (farge:#fff; tekstdekorasjon:ingen)
.link:hover (farge:#fff; text-decoration:underline)
#maske (
posisjon:absolutt;
venstre:0;
topp:0;
z-indeks:9000;
bakgrunnsfarge:#000;
display: ingen;
}
#bokser.vindu (
posisjon:absolutt;
venstre:0;
topp:0px;
-top: 40px;
bredde:440px;
høyde:200px;
display: ingen;
z-indeks: 9999;
polstring: 20px;
overløp: skjult;
}
#bokser #dialog (
bredde:375px;
høyde:203px;
polstring:10px;
bakgrunnsfarge:#ffffff;
}
.topp(
posisjon:absolutt;
venstre:0;
topp:0;
bredde:370px;
høyde:30px;
bakgrunn: #0085cc;
polstring: 8px 20px 6px 10px;
}
.lukke(
float:right;
}
.content(
polstring-topp: 35px;
}

I jQuery-koden vil vi fokusere på plasseringen av det modale vinduet og masken, i vårt tilfelle den gradvise mørkningen av bakgrunnen.

Oppmerksomhet! Ikke glem å inkludere biblioteket i hodet på dokumentet!

Koble til biblioteket fra Google-nettstedet. Vel, selve jQuery-koden.

jQuery-kode

$(document).ready(function() (
$("a").click(function(e) (
e.preventDefault();
var id = $(this).attr("href");
var maskHeight = $(dokument).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("topp", winH/2-$(id).height()/2);
$(id).css("venstre", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".window .close").click(function (e) (
e.preventDefault();
$("#maske, .vindu").hide();
});
$("#mask").click(function () (
$(this).hide();
$(".window").hide();
});
});

Operasjon