Просте модальне вікно на html5

Відео: Уроки Bootstrap верстки / # 12 - modal.js (модальні вікна)

Модальні вікна використовуються на багатьох сайтах для зручності користувача. Наприклад, в форма підписки, в формі для входу на сайт, різні повідомлення, щоб звернути увагу відвідувача на що-небудь важливе. І для того щоб створити таке вікно доводилося використовувати плагін jQuery UI Dialog або шукати інші способи. Але в HTML5 є спеціальний тег

Щоб побачити роботу даного вікна необхідно в браузері Chrome, в адресному рядку ввести «chrome: // flags /» і включити наступну функцію «Включити експериментальні функції веб-платформи»:

Тому даний приклад ви зможете побачити, тільки якщо зробите кроки, які описані вище:

Подивитися прімерСкачать

HTML частина

Користуватися цим елементом дуже легко, потрібно лише в потрібнім місці написати:

123456

id="Window"gt;lt;h3gt; Привееет!lt;/h3gt;lt;pgt; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, inventore!lt;/pgt;lt;button id="Exit"gt; Закритиlt;/buttongt;lt;/dialoggt;lt;button id="Show"gt; Показатиlt;/buttongt;

javascript частина

Але зверніть увагу, що при перегляді в Chrome (що є єдиним браузером, який підтримує цей тег на даний момент) діалогове вікно приховано. А з урахуванням HTML структури, на сторінці ми побачимо лише кнопку «Показати». Для відображення діалогового вікна потрібно використовувати javascript:

Відео: 1 Створення модального вікна HTML розмітка

123456789

(function() {var dialog = document.getElementById(`Window`)-document.getElementById(`Show`).onclick = function() {dialog.show()-}-document.getElementById(`Exit`).onclick = function() {dialog.close()-}-})()-

висновок

Тішить, що розробники намагаються все більше спростити розробку сайтів, але погано що даний тег не працює у всіх браузерах.

Успіхів!

джерело: https://hongkiat.com/blog/html5-dialog-window/