Направите искачући прозор користећи ХТМЛ, ЦСС и ЈаваСцрипт

Добро дизајнирани искачући прозори чине вашу веб локацију интерактивнијом и модернијом. Они могу створити тржишта и повећати продају за предузећа.

Можете да креирате искачуће прозоре са ХТМЛ, ЦСС и ЈаваСцрипт-ом. Користите следећи водич за креирање и стилизовање искачућег прозора од нуле. То чини вашу веб локацију интерактивном и ствара сјајно корисничко искуство.

Напишите ХТМЛ да бисте структурирали садржај

Хајде да напишемо неки ХТМЛ код који има скривени модални прозор који се појављује када кликнете на дугме. У овом случају, приказаћете значење речи Здраво! Искачући прозор ће имати наслов и неки садржај.

Одмах када покренете модални прозор, ефекат замућења се баца на позадину. Додајте класе у одељке које ћете касније користити за одабир модала у ЈаваСцрипт-у.

<тело>
<дугмекласа="отворени модални">Здраво!дугме>
<дивкласа="модал-цонтент хидден-модал">

instagram viewer

<дивкласа="модал-хеадер">
<х3>Значење Хелло!х3>
<дугмекласа="блиски модални">×дугме>
див>

<дивкласа="модално тело">
<стр>Здраво је поздрав на енглеском језику. Користи се код
 почетак реченице као увод да ли лично или
 на телефон.стр>
див>
див>
<дивкласа="блур-бг хидден-блур">див>
<скриптасрц="сцрипт.јс">скрипта>
тело>

Страница би требало да изгледа овако:

Такође можете желети да истражите ХТМЛ елемент дијалога ако желите да користите најсемантичнију ознаку.

Напишите ЦСС да бисте додали стил

Користите ЦСС да форматирате искачући прозор. Поставите прозор у центар веб странице на црној позадини, тако да је јасно видљив. Такође ћете стилизовати прозор, његову позадину и величину фонта.

Прво, креирајте униформан стил за целу страницу тако што ћете поставити маргину, паддинг и висину линије. Затим поравнајте елементе тела у средини на задњој позадини.

* {
маргина: 0;
паддинг: 0;
бок-сизинг: гранична кутија;
Висина линија: 1;
}
тело {
висина: 100%;
приказ: флек;
оправдати-садржај: центар;
флек-дирецтион: колона;
алигн-итемс: центар;
позадини: #000;
јаз: 30пк;
}

Затим, стилизујте опен-модал дугме. Дајте му другу боју позадине од остатка странице тако да се истиче. Такође, подесите његову боју фонта, величину, паддинг и време прелаза.

.опен-модал {
позадини: #20ц997;
боја: #ффф;
граница: ниједан;
паддинг: 20пк 40пк;
фонт-сизе: 48пк;
граница-радијус: 100пк;
курсор: показивач;
прелаз: све 0.3с;
нацрт: ниједан;
}
.опен-модал:ацтиве {
преобразити: транслатеИ(-17пк);
}

Затим стилизујте модални садржај који ће се приказати када се прозор отвори. Поставите белу позадину, дајте јој мању ширину од тела и додајте паддинг.

Такође му дајте з-индекс, тако да се појављује испред опен-модал дугме. Поред тога, подесите хидден-модал приказати као ништа, тако да остаје скривено док га не покренете.

.модал-цонтент {
позадини: #ццц;
ширина: 500пк;
паддинг: 20пк;
граница-радијус: 10пк;
з-индекс: 99;
}
.модал-хеадер {
приказ: флек;
оправдати-садржај: простор-између;
маргина-дно: 16пк;
боја: #000;
фонт-сизе: 30пк;
}
.модал-бодистр { 
фонт-сизе: 22пк;
Висина линија: 1.5; 
} 
.хидден-модал { 
приказ: ниједан; 
}

Затим стилизујте цлосе-модал дугме са провидном позадином и поравнајте га у средини.

.блискомодалне {
позадини: транспарентан;
граница: ниједан;
приказ: флек;
алигн-итемс: центар;
оправдати-садржај: центар;
висина: 20пк;
ширина: 20пк;
фонт-сизе: 40пк;
}
.блискомодалне:лебдети {
боја: #фа5252;
}

На крају, стилизујте елемент замућења који ће се бацити на позадину када се прозор отвори. Имаће максималну висину и ширину и филтер позадине. Подесите замућење као ништа, тако да се не види док се прозор не отвори.

.блур-бг {
положај: апсолутна;
топ: 0;
лево: 0;
висина: 100%;
ширина: 100%;
позадини: ргба(0, 0, 0, 0.3);
бацкдроп-филтер: замућење(5пк);
}
.хидден-блур {
приказ: ниједан;
}

Након додавања ЦСС-а, страница би требало да изгледа овако:

Контролишите искачући прозор помоћу ЈаваСцрипт кода

Користићете ЈаваСцрипт да отворите и затворите модални прозор тако што ћете га приказати или сакрити. Додати слушаоци догађаја на дугме да бисте га покренули да се отвори и затвори када кликнете на њега.

Прво изаберите релевантне елементе користећи ЦСС класе које сте дефинисали у ХТМЛ-у:

дозволити модалЦонтент = документ.куериСелецтор(".модал-цонтент");
дозволити опенМодал = документ.куериСелецтор(".опен-модал");
дозволити цлосеМодал = документ.куериСелецтор(".цлосе-модал");
дозволити блурБг = документ.куериСелецтор(".блур-бг");

Додајте слушаоца догађаја у опен-модал дугме тако да отвара прозор када кликнете на њега.

опенМодал.аддЕвентЛистенер("кликни", функција () {
 модалЦонтент.цлассЛист.ремове("скривени модални");
 блурБг.цлассЛист.ремове("скривено замућење");
});

Извршите супротне радње да бисте затворили искачући прозор, али овог пута их умотајте у именовану функцију. Ово ће обрадити понашање за више догађаја који могу довести до затварања модалног прозора:

дозволити цлосеМодалФунцтион = функција () {
 модалЦонтент.цлассЛист.адд("скривени модални")
 блурБг.цлассЛист.адд("скривено замућење")
}

Додајте слушаоце догађаја да управљају кликовима на позадину или дугме за затварање, као и случај када корисник притисне тастер Есцапе.

блурБг.аддЕвентЛистенер("кликни", цлосеМодалФунцтион);
цлосеМодал.аддЕвентЛистенер("кликни", цлосеМодалФунцтион);
документ.аддЕвентЛистенер("тастер", функција (догађај) {
ако (догађај.кључ "бекство"
 && !модалЦонтент.цлассЛист.цонтаинс("сакривен")
 ) {
 цлосеМодалФунцтион();
 }
});

Сада, када кликнете на Здраво! дугме, појављује се модал. Можете га затворити кликом на дугме Откажи на десној страни прозора. Погледајте код на цодепен.ио и интеракцију са модалном:

Употреба искачућих прозора

Главна употреба искачућих/модалних прозора у веб развоју је фокусирање на одређену ставку на веб локацији. Једном када се покрене, деактивира остатак странице и подстиче корисника да обрати пажњу на њега.

Искачући прозори анимирају ваш кориснички интерфејс. Они могу упозорити и скренути пажњу на важне информације на веб страници за ваше кориснике. Да би уклонио прозор, корисник мора да изврши неку радњу. На овај начин корисник може да ступи у интеракцију са прозором и добије жељене информације.