Kaip sukurti modalinį langą html. Kaip sukurti modalinį langą su css

Tai baigia sukurti paprastą iššokantįjį langą.

Norėdami sukurti iššokantį modalinį langą, paimkite elementą, suprojektuokite jį ir pridėkite nuorodą, kurią spustelėjus pasirodys:

Dokumento pavadinimas #okno ( plotis: 300 piks.; aukštis: 50 piks.; teksto lygiavimas: centre; užpildymas: 15 piks.; kraštinė: 3 piks. vientisas # 0000 cc; kraštinės spindulys: 10 piks.; spalva: # 0000 cc; ekranas: nėra; padėtis: absoliuti; viršuje : 0; kairysis: 0 ) #langas: tikslinis; Iššokantis skambutis

Kitas žingsnis kuriant visavertį modalinį langą yra pridėti mygtuką, kuris paslėps mūsų langą. Padarysime mygtuką iš įprastos nuorodos, pridėsime ją prie savo ir sukursime:

Dokumento pavadinimas #okno ( plotis: 300 piks.; aukštis: 50 piks.; teksto lygiavimas: centre; užpildymas: 15 piks.; kraštinė: 3 piks. vientisas # 0000 cc; kraštinės spindulys: 10 piks.; spalva: # 0000 cc; ekranas: nėra; padėtis: absoliuti; viršuje : 0; kairysis: 0 langas: langas: 0 12px; : #e6e6ff;)
Uždaryti langą Skambinimo iššokantis langas Pabandykite »

Kad puslapis būtų pritemdytas, kai rodomas modalinis langas, visą esamą lango kodą turite įdėti į papildomą:

Iššokantis langas!
Uždarykite langą

Padėkite pagrindinį ir ištempkite jį per visą lango plotį ir aukštį. Nustatome ekraną: nėra; ir nukreipkite į jį lango skambučio nuorodą.

Vaikui nuimkite ekraną: nėra; (nebereikia, nes tėvai viską paslėps jame). Dėl to dabar vienas iš tėvų yra atsakingas už modalinio lango rodymą ir puslapio fono pritemdymą, o vaikas – tik už paties lango dekoravimą:

Dokumento pavadinimas #zatemnenie ( fonas: rgba(102, 102, 102, 0,5); plotis: 100%; aukštis: 100%; padėtis: absoliutus; viršuje: 0; kairėje: 0; ekranas: nėra; ) #okno ( plotis: 300px: border-radius: 0px: auto: #fff ) .close; ;
Uždaryti langą Skambinimo iššokantis langas Pabandykite »

Pastaba: jei jums reikia, kad vartotojas įeidamas į puslapį iš karto pamatytų iššokantįjį langą (o ne iškviestų jį per nuorodą), tada puslapio adresą reikės įvesti kartu su lango ID (pavyzdžiui, adresas gali atrodo taip: site.ru/papka/documet.

Dar kartą kreipiuosi į modalinių (iššokančių) langų kūrimo temą. Pastaruoju metu vis labiau domiuosi įvairiomis iššokančiųjų langų vykdymo technikomis, nenaudojant javascript, jQuery įskiepių ir kt. Didesnį susidomėjimą kelia galimybė naudoti grynus stilius ir neišsenkantis naujų funkcijų potencialas.
Remiantis kai kurių gerbiamų buržujų raida, šiuo atžvilgiu jie yra gudrūs vaikinai, jie gauna gerų rezultatų kurdami modalinius langus naudodami CSS3. Užduotis, visų pirma, yra pasiekti daugiau ar mažiau stabilų galutinio rezultato suderinamumą tarp naršyklių ir, žinoma, su mažiausiais nuostoliais sumažinti bendrą kodo kiekį tiek HTML, tiek CSS, kad palengvinti ilgai kenčiančių svetainių kūrimo darbuotojų gyvenimą.
Pamatysime, kas atsitiks galų gale, šiuo klausimu šiandien, ir tuo pat metu išmoksime sukurti iššokančiuosius modalinius langus naudojant CSS3 „stebuklingumą“.

Atnaujinta: 2017-10-27

Pirmiausia, visi, kurie domisi šia tema, galite pažvelgti į pavyzdį, kaip veikia modaliniai langai įvairiose versijose, ir atsisiųsti šaltinius:

Ši pamoka neturėtų būti laikoma veiksmų vadovu, nes šiame etape patikimą palaikymą buvo galima pasiekti tik naudojant šiuolaikines naršykles (IE 9+, Firefox, Safari, Opera, Chrome). Atsižvelgiant į tai, kad senovinės IE naršyklės versijos vis dar yra gana populiarios tarp vartotojų, rekomenduoju šį straipsnį žiūrėti kaip į savotišką eksperimentą, CSS3 galimybių demonstravimą.

Gerai, dabar pereikime tiesiai prie tikrojo html kodo išdėstymo ir modalinio lango stiliaus naudojant css3)))

Pirmiausia sukurkime pagrindinį HTML žymėjimą. Kaip matote, pagrindinis dizainas yra gana paprastas, jei atsižvelgsime į modalinių langų ir mygtukų (nuorodų) žymėjimą HTML. Kiekvienas modalinis langas yra ne kas kita, kaip standartinis konteineris, kurio viduje yra tam tikras turinys ir mygtukas „Uždaryti“, suformuotas tik naudojant CSS.

Atidaryti langą 1 Atidaryti langą 2 Vaizdo įrašas lange 3 Nuotrauka lange 4 Čia galite patalpinti bet kokį turinį, tekstą su nuotraukomis ar vaizdo įrašais! Pavadinimas Čia įterpiate savo vaizdo įrašą arba iš bet kurio trečiosios šalies šaltinio, „YouTube“, „Vimeo“ ir kt. (iframe, įterpti)...

Aukščiau pateiktame kodo pavyzdyje dėl aiškumo parašiau trumpus paaiškinimus modalinių langų konteineriuose. Pagal analogiją jūs tiesiog turite įdėti bet kokį turinį į iššokančiojo lango div konteinerį, nesvarbu, ar tai paprastas tekstas, nuotraukos ar vaizdo įrašai iš bet kurio trečiosios šalies šaltinio, „YouTube“, „Vimeo“ ir kt. Galite sukurti nuorodas, kad iškviestumėte modalinių langų tekstą, arba suformatuokite jas formoje, kaip parodyta pavyzdyje.

Kitas žingsnis, tai įdomiausias dalykas, svarbu paruošti visus reikiamus stilius mūsų modaliniam langui, suprojektuoti išvaizdą ir pridėti funkcionalumo. Praleidau pagrindinius puslapių stilius, kad nesukelčiau painiavos, o dėl didesnio aiškumo kai kurias taisykles praskiedžiau komentarais:

/* Pagrindiniai išblukimo ir modalinio sluoksnio stiliai : rgba(0, 0, 0, 0.65 pozicija: fiksuota */ žymeklis: numatytasis /* žymeklio tipas */ .overlay:target; ) / * modaliniai langų stiliai */ .popup ( viršuje: -100%; dešinėje: 0; kairėje: 50%; šrifto dydis: 14 pikselių; z indeksas: 20; paraštė: 0; plotis: 85%; min. plotis : 320px ; max-width: 600px, stabilus slinkant spindulys: 4px; -ms-border-radius: 4px; šriftas: 14px 60 tšk. rgba(0,0,0,.3); -ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); -Webkit-transform: išversti(-50%, -500%); -ms-transformuoti: išversti (-50%, -500%); -o-transformuoti: išversti(-50%, -500%); transformuoti: išversti(-50%, -500%); -webkit-transition: -webkit-transform 0.6s palengvinimas; -moz-transition: -moz-transform 0.6s palengvinimas; -o-perėjimas: -o-transformavimas 0.6s palengvinimas; perėjimas: transformavimas 0,6 s palengvinimas; ) /* aktyvuoti modalinį bloką */ .overlay:target+.popup ( -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate ( -50%, 0) transformuoti (-50%, 0 viršų: 20% ) /* iš uždarymo mygtuko */ .close ( viršuje: -10px; plotis: 20px; aukštis: 20px; -box-shadow: 0px 10px #000; 0px 10px #000; -moz-transition: visi lengvi .8s; -ms-transition: visi lengvi .8s; 9);

Kaip matote, mieli draugai, viskas yra gana paprasta ir nėra jokios bereikalingos painiavos. Jei viską atliksite teisingai, savo arsenale gausite nuostabų įrankį, kuriame galėsite talpinti bet kokį turinį, nesvarbu, ar tai būtų tekstinis turinys, nuotraukos, įvairios registracijos ir atsiliepimų formos, ar vaizdo įrašai iš bet kurio trečiosios šalies šaltinio. Eksperimentuokite su parametrais, keiskite langą kaip norite. Jei įmanoma, pasidalinkite savo patirtimi ar netikėtai iškylančiomis problemomis komentaruose.

Dažnai, net labai dažnai, manęs klausia, kaip tinkamai sustabdyti vaizdo įrašų atkūrimą uždarant modą. langas. Kai uždarote modalinį langą, vaizdo įrašo atkūrimas demonstracijoje sustabdomas. Demonstracijoje naudojau onclick įvykį lango uždarymo mygtukui, nuorodoje nurodant demo puslapio adresą, t.y. puslapis, kuriame yra vaizdo langas:

Galite tiesiog naudoti nuorodą su tuščiu href="" atributu, abiem atvejais puslapis persikrauna ir atitinkamai užsidaro langas ir sustoja vaizdo įrašas, žinoma, ramentas, bet nėra kito efektyvesnio ir pagrįstesnio sprendimo be jungiantis javascript, šiuo metu manęs čia nėra.

Naudodami „JavaScript“ API galite valdyti „Chromeless Player“ ir „YouTube“ įterptąjį grotuvą naudodami „JavaScript“ kodą. Mūsų modaliniam blokui su įterptu vaizdo įrašu vykdomasis js bus toks:

var grotuvas; funkcija YouTubePlayerAPIReady() ( grotuvas = naujas YT.Player("grotuvas"); ) $("#stop").click(function())( player.stopVideo() ))

Spustelėjus mygtuką su id="stop", bus iškviesta funkcija, langas užsidarys ir vaizdo įrašo atkūrimas sustos.
Tačiau turėtumėte suprasti, kad kitoms vaizdo paslaugoms šokiai su tamburinais skirsis))). Nors visada yra pasirinkimas – naudoti jau paruoštus specializuotus įskiepius.

Interneto dizaineriai ir verslininkai, gyvenantys rusakalbėse šalyse, tikriausiai nori turėti galimybę naudoti ne tik anglų kalbos šablonus. Jie taip pat nori turėti prieigą prie paruoštų sprendimų rusų kalba rinkinių. Todėl norėtume atkreipti jūsų dėmesį į naujausią skyrių, kuris dabar pristatomas TemplateMonster prekyvietėje. Verta paminėti, kad kiekvieno šablono tekstas buvo parašytas rankiniu būdu. Be to, norint sukurti įspūdingą internetinį projektą, nereikia jokių pažangių programavimo žinių.

Su visa pagarba, Andrew

Greičiausiai jau ne kartą matėte iššokantį modalinį langą internete – registracijos patvirtinimas, įspėjimas, informacinė informacija, failų atsisiuntimas ir daug daugiau. Šioje pamokoje pateiksiu kelis pavyzdžius, kaip sukurti paprasčiausius modalinius langus.

$(document).ready(function()
{
alert("Tekstas iššokančiame lange");
});

Įklijuokite kodą bet kurioje puslapio dalyje. Iš karto po puslapio įkėlimo, be jokių komandų, pamatysite langą, kuris atrodo taip:

Tačiau šis kodas bus vykdomas po to, kai visas puslapis bus įkeltas į naršyklę. Mūsų pavyzdyje, įkėlus puslapį su vaizdais, pasirodys paprastas iššokantis langas:

$(langas).load(function()
{
alert ("Puslapis baigtas įkelti!)");
});

Dažnai galite pamatyti, kad tokiuose languose yra prisijungimo ir registracijos formos. Eikime prie reikalo

Pirma, parašykime html dalį. Šį kodą įdedame į jūsų dokumento turinį.

Modalinio lango iškvietimas

Modalinio lango tekstas
Uždaryti
Tekstas modaliniame lange.

CSS kodas. Arba atskirame css faile, arba galvoje.

kūnas(
šriftų šeima: verdana;
šrifto dydis: 15 pikselių;
}
.link (spalva: #fff; teksto dekoravimas: nėra)
.link:hover (spalva:#fff; text-decoration:pabraukta)
#kaukė (
padėtis: absoliutus;
kairėje:0;
viršuje:0;
z indeksas: 9000;
background-color:#000;
ekranas: nėra;
}
#boxes.window (
padėtis: absoliutus;
kairėje:0;
viršuje:0px;
- viršuje: 40 pikselių;
plotis: 440 pikselių;
aukštis: 200px;
ekranas: nėra;
z indeksas: 9999;
pamušalas: 20px;
perteklius paslėptas;
}
#dėžutės #dialogas (
plotis: 375 pikseliai;
aukštis: 203px;
pamušalas: 10px;
fono spalva:#ffffff;
}
.top(
padėtis: absoliutus;
kairėje:0;
viršuje:0;
plotis: 370 pikselių;
aukštis: 30px;
fonas: #0085cc;
padding: 8px 20px 6px 10px;
}
.Uždaryti(
plūdė: dešinė;
}
.turinys(
paminkštinimas-viršus: 35px;
}

„jQuery“ kode sutelksime dėmesį į modalinio lango ir kaukės padėtį, mūsų atveju – laipsnišką fono tamsėjimą.

Dėmesio! Nepamirškite į dokumento antraštę įtraukti biblioteką!

Bibliotekos prijungimas iš Google svetainės. Na, pats jQuery kodas.

jQuery kodas

$(document).ready(function() (
$("a").click(function(e) (
e.preventDefault();
var id = $(this).attr("href");
var maskAukštis = $(dokumentas).aukštis();
var maskWidth = $(langas).width();
$("#kaukė").css(("width":maskWidth,"height":maskHeight));
$("#kaukė").fadeIn(1000);
$("#mask").fadeTo("lėtas",0.8);
var winH = $(langas).aukštis();
var winW = $(langas).width();
$(id).css("viršus", winH/2-$(id).height()/2);
$(id).css("left", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".langas .uždaryti").click(function (e) (
e.preventDefault();
$("#kaukė, .langas").hide();
});
$("#kaukė").click(function () (
$(tai).hide();
$(".langas").hide();
});
});

Šiais laikais įvairiose svetainėse, be jQuery, tapo įprastas visų rūšių iššokantysis modalinis langas, skirtas registracijai, autorizacijai, informacijos langai, įvairių formų ir dydžių , paprastam ir patogiam tokių iššokančiųjų langų kūrimui – pavyzdžiui, tą patį „Shadowbox“.

Tokių iššokančiųjų langų išvaizda, dydis ir dizainas yra visiškai kitoks - su perdanga, šešėliais, animacija - visko nesuskaičiuosi. Vienintelis jų bruožas yra galbūt tai, kad jie dažniausiai rodomi pačiame puslapio centre – tiek horizontaliai, tiek vertikaliai. Ir šis centravimas atliekamas naudojant JS. Aš nesigilinsiu į šių skaičiavimų detales, juos aprašysiu tik trumpai:

Iššokančiojo lango HTML kodas paprastai turi tokią struktūrą:

... -- Iššokantis langas su turiniu -->

Ir CSS ( čia ir toliau sąmoningai neparašysiu kai kurių ypatybių, kurios būtinos tik kai kurioms naršyklėms ir jų versijoms, palikdamas tik pačias paprasčiausias):

Popup__overlay(
padėtis: fiksuota;
kairėje: 0;
viršuje: 0;
fonas : #000 ;
neskaidrumas: .5;
filtras: alfa(nepermatomumas=50);
z indeksas: 999
}
.popup(
padėtis: absoliuti;
plotis: 20%;
z indeksas: 1000;
kraštinė : 1px solid #ccc ;
fonas: #fff
}

JS nustato naršyklę ir naršyklės versiją ir pagal tai apskaičiuoja darbo srities matmenis bei paties iššokančiojo lango matmenis (jei jie nenurodyti), o tada atliekami paprasti skaičiavimai pagal jo viršutinio kairiojo kampo padėtį ( css ypatybių kairėje ir viršuje .popup). Daugelis papildinių taip pat reaguoja į puslapio dydžio keitimą, kiekvieną kartą perskaičiuodami visą dalyką, kad iššokantis langas būtų tiksliai darbo srities centre.

Iš prigimties esu perfekcionistė ​​(žinau, kartais tai yra blogai), dažnai nerimauju dėl net mažų smulkmenų, stengiuosi šias detales patobulinti ir suteikti maksimaliai įmanomo išplėtimo, ir mane tai užkabino. ypatingas visų šių įskiepių darbo taškas. Kilo mintis, kad visas iššokančiojo lango pozicionavimo darbas gali būti perkeltas iš JS pečių į pačios naršyklės pečius, tai yra, šį darbą galima atlikti naudojant CSS.

Tai mes darysime.

Žemiau pateiksiu iššokančiojo lango, kuris veikia visose pagrindinėse pagrindinių naršyklių versijose, pavyzdį. Kad jis tinkamai veiktų IE
< div class ="popup">

Ir šiek tiek CSS:

Popup__overlay(
padėtis: fiksuota;
kairėje: 0;
viršuje: 0;
plotis: 100%;
aukštis: 100%;
z indeksas: 999
}
.popup(
}