Як зробити спливаюче вікно з затемненням

Дуже часто буває потрібно вивести користувачеві якусь інформацію або пропозицію в окремому вікні. Оскільки така інформація буде максимально легко доходити до відвідувачів. Однак, якщо використовувати jаvascript для виведення звичайних вікон, то їх буде блокувати браузер. Я вирішив розповісти про те, як зробити спливаюче вікно з затемненням з використанням тільки HTML і CSS.

Я відразу наведу код, а потім трохи його прокоментую:

 
xmlns="Http://w3.org/1999/xhtml"gt; 
 
 
 
 
 
 
 
 
 
 
 
 
 
id="Parent_popup"gt; 
id="Popup"gt; 
style="cursor: pointer-"onclick="document.getElementById(`Parent_popup`).style.display=`None`-"gt;Закрити 
 Текст у вікні

По-перше, я вивів багато h1 для того, щоб показати, що коли контенту багато і користувач буде прокручувати вниз, вікно буде йти разом з прокруткою. У реальності, замість h1 буде звичайний контент на Вашому сайті.

блок parent_popup займається затемненням (background-color і opacity), А також виводиться поверх всього іншого контенту (z-index: 100-).

А блок popup - це безпосередньо саме вікно. Ми задаємо його положення (top і left), А також робимо його fixed для того, щоб він переміщався разом з прокруткою сторінки.

І, нарешті, в коді є текст "закрити", Клікнувши по якому, вікно буде закрито. Це єдине місце, де використовується jаvascript.

Я можу сказати, що дане спливаюче вікно з затемненням дуже легке в налаштуванні і установці. Ви можете вставляти будь-який контент в будь-яке місце вікна, а відсутність виведення через jаvascript гарантує, що це вікно побачать всі відвідувачі.

Поділися в соціальних мережах:

Схожі