DIALOG (тег в HTML)
Что такое dialog в html:
Отображает диалоговое окно или другой интерактивный компонент.Атрибуты:
- open - указывает, что диалог виден и активен.
Как прописать dialog в html:
<dialog open><h2>Пример модального диалога</h2>
<p>Это модальное диалоговое окно.</p>
<button>Закрыть</button>
</dialog>
Примеры использования
Простое диалоговое окно:
<button id="show-dialog-btn">Показать диалог</button>
<dialog id="my-dialog">
<p>Это простое диалоговое окно.</p>
<button id="close-dialog-btn">Закрыть</button>
</dialog>
<script>
const showDialogBtn = document.querySelector('#show-dialog-btn');
const myDialog = document.querySelector('#my-dialog');
const closeDialogBtn = document.querySelector('#close-dialog-btn');
showDialogBtn.addEventListener('click', () => {
myDialog.showModal();
});
closeDialogBtn.addEventListener('click', () => {
myDialog.close();
});
</script>
Диалоговое окно с формой:
<button id="show-dialog-btn">Показать диалог</button>
<dialog id="my-dialog">
<form>
<label for="name">Имя:</label>
<input type="text" id="name" name="name" required>
<button type="submit">Отправить</button>
</form>
<button id="close-dialog-btn">Закрыть</button>
</dialog>
<script>
const showDialogBtn = document.querySelector('#show-dialog-btn');
const myDialog = document.querySelector('#my-dialog');
const closeDialogBtn = document.querySelector('#close-dialog-btn');
showDialogBtn.addEventListener('click', () => {
myDialog.showModal();
});
closeDialogBtn.addEventListener('click', () => {
myDialog.close();
});
</script>
