Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 50 из 70 · 10 мин
dialog, popover и inert: модальные окна, меню и подсказки, которые браузер делает доступными сам.
Хочу: нажал «Состав» — появилась подсказка. И окно «Точно отменить запись?»
Подсказка — popover. Важный вопрос, блокирующий страницу, — модальный dialog.
popoverpopover у блока и popovertarget у кнопки. Закрывается кликом мимо и Escape.<button popovertarget="info">Состав</button>
<div id="info" popover>Карандаш, сливки, ваниль</div>popovertargetid всплывающего элемента.<button popovertarget="tip">Что такое HTML?</button>
<div id="tip" popover>Язык разметки страниц</div>popovertargetactiontoggle (по умолчанию), show или hide.<button popovertarget="tip" popovertargetaction="hide">Закрыть</button><dialog>showModal()) блокирует страницу до ответа.<dialog open>
<form method="dialog">
<p>Отменить бронь?</p>
<button value="yes">Да</button>
</form>
</dialog>method="dialog"method="dialog" закрывает окно.inertСделай кнопку «Что такое пенал?», которая открывает popover: у кнопки popovertarget="tip", у блока — id="tip" и атрибут popover.
popovertarget="tip" — пока нетid="tip" и popover — пока нетВыберите один ответ.
Какой атрибут кнопки связывает её со всплывающим элементом <div id="tip" popover>?
Выберите один ответ.
Как закрыть <dialog> кнопкой без JavaScript?
Выберите один ответ.
Нужно спросить «Удалить аккаунт?» и не дать работать со страницей до ответа. Что подходит?
Проверяем состояние обучения…