Negramotné potvrzení html. Metody upozornění, výzva, potvrzení v JavaScriptu. Způsob upozornění v dialogovém okně

Obecně centrování HTML prvky na stránce - to není složitá záležitost. V některých případech... si weboví vývojáři musí dát hlavu do hlavy, aby našli to nejlepší řešení.

Horizontální vycentrování prvků není tak obtížné, vertikálně to již vyvolává otázky, ale jejich kombinování obecně může být slepá ulička. V éře adaptivní design, málokdy máme jasno o přesných rozměrech určitých prvků. Napočítal jsem 6 různými způsoby centrovací prvky s pomocí CSS. Začněme s jednoduché příklady, skončeme složitějšími. Bude fungovat se stejným HTML kódem:

Vodorovné zarovnání pomocí zarovnání textu

Někdy je to nejjednodušší řešení nejlepší:

Div.center ( zarovnání textu: na střed; pozadí: hsl(0, 100 %, 97 %); ) div.center img ( šířka: 33 %; výška: auto; )

Tady ne vertikální zarovnání: k tomu budete muset přidat vlastnosti margin-top a margin-bottom do div.

Centrování s okrajem: auto

Další řešení pro horizontální zarovnání:

Div.center ( pozadí: hsl(60, 100 %, 97 %); ) div.center img ( displej: blok; šířka: 33 %; výška: auto; okraj: 0 auto; )

Upozorňujeme, že pro tuto metodu je třeba nastavit zobrazit vlastnost: blokovat.

Centrování pomocí buňky tabulky

Použitím display: table-cell zajistíme, aby byl prvek centrován jak svisle, tak vodorovně. Zde ale musíme obrázek vnořit do jiného prvku div.

Zarovnáno na střed ( display: table; background: hsl(120, 100%, 97%);width: 100%; ) .center-core ( display: table-cell; text-align: center; vertical-align: middle; ) .center-core img ( šířka: 33 %; výška: auto; )

Aby vše fungovalo správně, je třeba nastavit div na šířku: 100 %. Pro vertikální vystředění prvku použijeme pomocí standardních technik, nastavení výšky. Funguje všude, včetně IE8+.

Absolutní vyrovnání

Velmi zajímavé řešení. Myšlenka je taková, že musíte nastavit výšku vnější nádoby:

Absolute-aligned ( position: relativní; min-height: 500px; background: hsl(200, 100%, 97%); ) .absolute-aligned img ( width: 50%; min-width: 200px; height: auto; overflow : auto; poloha: nahoře: 0;

Centrum pomocí překladu

Nové řešení, kde se používá CSS transformace. Poskytuje obojí horizontální zarovnání a vertikální:

Center ( background: hsl(180, 100%, 97%); position: relativní; min-height: 500px; ) .center img ( position: absolute; top: 50%; left: 50%; transform: translate(-50) %, -50 %); šířka: 30 %: auto);

Existuje několik nevýhod:

• Vlastnictví CSS transformace vyžaduje použití předpon prohlížeče
• Nefunguje ve starších verzích IE (8 a nižších)
• Vnější nádobě je třeba dát výšku.
• Pokud je uvnitř kontejneru text, může být trochu rozmazaný.

Centrování pomocí typu flex display

Asi nejjednodušší varianta.

Center ( background: hsl(240, 100%, 97%); display: flex; justify-content: center; align-items: center; ) .center img ( width: 30%; height: auto; )

Nefunguje ve všech verzích IE (ačkoli se můžete chránit pomocí display: table-cell navíc). Kompletní CSS:

Střed ( pozadí: hsl(240, 100 %, 97 %); displej: -webkit-box; /* Safari, iOS 6 a dřívější verze; Android, starý WebKit */ display: -moz-box; /* Firefox (může být buggy) */ display: -ms-flexbox; /* IE 10 */ zobrazení: -webkit-flex; /* Chrome 21+ */ displej: flex; /* Opera 12.1+, Firefox 22+ */ -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: střed; -webkit-align-items: center; align-items: center; -webkit-box-pack: střed; -moz-box-pack: střed; -ms-flex-pack: střed; -webkit-justify-content: center; justify-content: center; )

Centrování pomocí calc

v některých případech tato metoda univerzálnější než použití flexboxu:

Střed ( pozadí: hsl(300, 100 %, 97 %); min-výška: 600px; pozice: relativní; ) .center img ( šířka: 40 %; výška: auto; pozice: absolutní; nahoře: calc (50 % -) 20 %): vypočteno (50 % - 20 %);

Je to velmi jednoduché, můžeme si vypočítat rozměry, které potřebujeme v závislosti na celém rozložení stránky. Výpočty jsou velmi jednoduché, 50 % je středový bod kontejneru, ale naším úkolem je umístit levý horní roh obrázku na tyto souřadnice. Dále odečtěte polovinu výšky a šířky obrázku. Vzorec je následující:

Nahoře: calc(50% - (40%/2)); vlevo: calc(50% - (40%/2));

V praxi se s tím můžete setkat tato metoda funguje dobře, pokud známe velikosti prvků:

Center img ( šířka: 500px; výška: 500px; pozice: absolutní; top:calc(50% - (300px / 2)); vlevo: calc(50% - (300px - 2)); )

Tuto metodu podporuje Firefox, od verze 4 budete muset zaregistrovat předpony prohlížeče. Nefunguje v IE 8. Celý kód:

Střed img ( šířka: 40 %; výška: auto; pozice: absolutní; nahoře: -webkit-calc(50% - 20%); vlevo: -webkit-calc(50% - 20%); nahoře: -moz-calc (50 % - 20 %) zleva: -moz-calc (50 % - 20 %);

Doufám, že tyto metody vám postačí k tomu, abyste pro sebe našli to nejlepší řešení.

Kolik kopií již bylo rozbito ohledně úkolu zarovnat prvky na stránce. Upozorňuji na překlad výborného článku s řešením tohoto problému od Stephena Shawa pro Smashing Magazine - Absolute Horizontal And Vertical Centering In CSS.

Všichni jsme věděli o okraj: 0 auto; pro horizontální centrování, ale okraj: auto; nefungovalo pro vertikální. To lze snadno opravit jednoduchým nastavením výšky a použitím následujících stylů:

Absolutní střed ( okraj: auto; pozice: absolutní; nahoře: 0; vlevo: 0; dole: 0; vpravo: 0; )
Nejsem první, kdo toto řešení navrhuje, ale tento přístup se používá jen zřídka vertikální zarovnání. V komentářích k článku How to Center Anything With CSS Simon odkazuje na příklad jsFiddle, který poskytuje skvělé řešení Pro vertikální centrování. Zde je několik dalších na toto téma.

Pojďme se na metodu podívat blíže.

Výhody

• Kompatibilita mezi různými prohlížeči (včetně IE 8-10)
• Žádné další značení, minimální styling
• Přizpůsobivost
• Nezávislost od vycpávka(bez box-size!)
• Funguje pro obrázky

Nedostatky

• Výška musí být specifikována (viz Variabilní výška)
• Doporučuje se nastavit přetečení: auto aby se obsah nešířil
• Nefunguje na Windows Phone

Kompatibilita s prohlížečem

Metoda byla testována a funguje skvěle v prohlížečích Chrome, Firefox, Safari, Mobilní Safari a dokonce i IE 8-10. Jeden uživatel zmínil, že obsah není na Windows Phone vertikálně zarovnán.

Uvnitř nádoby

Obsah umístěný v kontejneru s poloha: relativní dokonale se vyrovná:

Absolute-Center ( šířka: 50 %; výška: 50 %; přetečení: auto; okraj: auto; pozice: absolutní; nahoře: 0; vlevo: 0; dole: 0; vpravo: 0; )

Pomocí výřezu

Nastavíme obsah na pozici: opraveno a nastavíme z-index:

Absolute-Center.is-Fixed ( šířka: 50 %; výška: 50 %; přetečení: auto; okraj: auto; poloha: pevná; nahoře: 0; vlevo: 0; dole: 0; vpravo: 0; z-index: 999;

Přizpůsobivost

Hlavní výhodou popsané metody je skvělá práce když je výška nebo šířka zadána v procentech, a dokonce i porozumění min-width/max-width A min-výška/max-výška.

Absolute-Center.is-Responsive ( šířka: 60 %; výška: 60 %; minimální šířka: 400 pixelů; max. šířka: 500 pixelů; odsazení: 40 pixelů; přetečení: auto; okraj: auto; pozice: absolutní; nahoře: 0; vlevo: 0; vpravo: 0;

Ofsety

Pokud má web pevnou hlavičku nebo potřebujete udělat nějaké jiné odsazení, stačí do stylů přidat kód jako tento horní: 70px; Aktuálně nastaveno okraj: auto; blok obsahu bude správně vycentrován na výšku.

Můžete také zarovnat obsah podle pravá strana, ponechat centrování na výšku. Chcete-li to provést, musíte použít vpravo: 0; vlevo: auto; pro pravé zarovnání popř vlevo: 0; vpravo: auto; pro zarovnání doleva.

Absolute-Center.is-Right ( šířka: 50 %; výška: 50 %; okraj: auto; přetečení: auto; pozice: absolutní; nahoře: 0; vlevo: auto; dole: 0; vpravo: 20px; zarovnání textu: právo;

Spousta obsahu

Abychom zajistili, že velké množství obsahu nedovolí, aby se rozvržení vzdalovalo, používáme přetečení: auto. se objeví vertikální rolování. Můžete také přidat max-výška: 100 %; pokud obsah nemá další výplň.
.Absolute-Center.is-Overflow ( šířka: 50 %; výška: 300 pixelů; max-výška: 100 %; okraj: auto; přetečení: auto; pozice: absolutní; nahoře: 0; vlevo: 0; dole: 0; vpravo : 0;

Obrázky

Tato metoda funguje skvěle i pro obrázky! Přidáme styl výška: auto; pak se obrázek změní spolu s kontejnerem.

Absolute-Center.is-Image ( šířka: 50 %; výška: auto; okraj: auto; pozice: absolutní; nahoře: 0; vlevo: 0; dole: 0; vpravo: 0; )

Variabilní výška

Popsaná metoda vyžaduje danou výšku bloku, kterou lze zadat v procentech a ovládat pomocí max-výška, díky čemuž je metoda ideální pro responzivní weby. Jedním ze způsobů, jak nespecifikovat výšku, je použít displej: tabulka. V tomto případě je blok obsahu vystředěn bez ohledu na velikost.

Mohou nastat problémy s kompatibilitou mezi různými prohlížeči, možná byste měli použít metodu tabulky buněk (popsaná níže).

• Firefox/IE8: používání displej: tabulka Zarovná blok svisle k hornímu okraji dokumentu.
• IE9/10: používání displej: tabulka zarovná blok doleva horní roh stránky.
• Mobilní Safari: pokud je šířka zadána v procentech, trpí horizontální centrování

.Absolute-Center.is-Variable ( displej: tabulka; šířka: 50 %; přetečení: auto; okraj: auto; pozice: absolutní; nahoře: 0; vlevo: 0; dole: 0; vpravo: 0; )

Jiné způsoby

Popsaná metoda funguje ve většině případů skvěle, ale existují i ​​jiné metody, které mohou být použitelné pro řešení konkrétních problémů.

Záporná marže

Asi nejoblíbenější způsob. Vhodné, pokud jsou známy rozměry bloku.

Je-negativní ( šířka: 300px; výška: 200px; odsazení: 20px; pozice: absolutní; nahoře: 50%; vlevo: 50%; okraj-levý: -170px; /* (šířka + odsazení)/2 */ okraj- nahoře: -120px /* (výška + odsazení)/2 */ )
výhody:

• Kompatibilita mezi prohlížeči
• Minimální kód

nedostatky:

• Ne adaptivní
• Pokud je v nádobě příliš mnoho obsahu, rozvržení se zmenšuje
• Musíte kompenzovat odsazení nebo použití box-sizing: border-box

Pomocí transformace

Jeden z nejvíce jednoduchými způsoby, podporuje změnu výšky. Na toto téma existuje podrobný článek - "Centering Percentage Width/Height Elements" od CSS-Tricks.

Is-Transformed ( šířka: 50 %; okraj: auto; pozice: absolutní; nahoře: 50 %; vlevo: 50 %; -webkit-transform: translate(-50%,-50%); -ms-transform: translate( -50%,-50%) transformovat: přeložit (-50%,-50%);
výhody:

• Variabilní výška
• Minimální kód

nedostatky:

• Nefunguje v IE 8
• Použití předpon
• Může rušit jiné účinky s transformovat
• V některých případech jsou okraje bloku a text během vykreslování rozmazané

Tabulka-buňka

Možná jeden z nejlepších a nejjednodušších způsobů. Podrobně popsáno v článku "Flexibilní výškové vertikální centrování s CSS, mimo IE7" od 456bereasttreet. Hlavní nevýhoda- další označení: jsou vyžadovány tři prvky:

CSS:
.Pos-Container.is-Table ( zobrazení: tabulka; ) .is-Table .Table-Cell ( zobrazení: buňka-tabulka; svislé zarovnání: na střed; ) .is-Tabulka .Středový blok ( šířka: 50 %; okraj: 0 auto;
výhody:

• Variabilní výška
• Rozvržení nefunguje, když velké množství text v bloku
• Kompatibilita mezi prohlížeči

nedostatky:

• Složitá struktura

Flexbox

Budoucnost CSS, flexbox, vyřeší mnoho dnešních problémů s rozložením. Podrobně je to napsáno v článku časopisu Smashing Magazine s názvem Centering Elements with Flexbox.

Pos-Container.is-Flexbox ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; - moz-box-align: center; -webkit-align: center; -ms-flex-pack: center; : střed; zarovnat-obsah: střed)
výhody:

• Obsah může mít libovolnou výšku nebo šířku
• Lze použít ve složitějších případech

nedostatky:

• Žádná podpora pro IE 8-9
• Vyžaduje kontejner nebo styly v těle
• Vyžaduje širokou škálu předpon to správné fungování v moderních prohlížečích
• Možné problémy s výkonem

Sečteno a podtrženo

Každá metoda má výhody a nevýhody. V podstatě jde o výběr, které prohlížeče by měly být podporovány

V JavaScriptu existují tři základní operace, které umožňují přijímat od uživatele data pro další zpracování ve skriptech. Ty jsou varovné, rychlé a potvrzující. K čemu se používají, jak je používat a další nuance budou diskutovány později v tomto článku.

upozornění

Používá se k zobrazení modálního okna na obrazovce prohlížeče (to znamená, že uživatel nemůže na stránce nic klepnout, dokud toto okno nezavře. V tomto příkladu, dokud v okně neklikne na „OK“).

Po zobrazení zprávy obsažené ve výstraze se provádění skriptu pozastaví a obnoví se po zavření modálního okna.

V případě plnění a klikněte na OK, informace zadané uživatelem se vrátí do skriptu.

Syntaxe tohoto příkazu poněkud složitější než předchozí, protože umožňuje nastavit text zprávy uživateli a obsah pole pro zadání informací, které se zobrazí ve výchozím nastavení: výsledek = prompt(název, výchozí) ;, Kde

• titul– zpráva, která se uživateli zobrazí v modálním okně. Argument je povinný.
• výchozí– co se ve výchozím nastavení zobrazí v poli pro zadávání textu. Je také vyžadován, protože pokud není zadán, může to vést k chybám v některých prohlížečích. Pokud chcete ponechat pole pro zadání informací prázdné, nastavte výzvu následovně:

  var myTest = prompt("Jakékoli informace" , """);

Malý příklad použití promptu:

var rok = prompt( "V jakém roce jsi ukončil univerzitu?", 2008);

alert("Jste absolventem " + roku + "ročníku!" ) ; Obvykle tento příkaz

slouží ke sběru dat od uživatelů, která skript potřebuje k další práci.

potvrdit Také představuje modální okno

. Jak už z názvu asi tušíte, obvykle se používá ke koordinaci něčeho s uživatelem.