Розробіть структуру HTML із контейнером для основного вмісту та модальним елементом для вікна сповіщень. Застосуйте CSS, щоб центрувати основний вміст по вертикалі та горизонталі за допомогою Flexbox. Стилізуйте модаль, щоб охопити весь вікно перегляду та відцентрувати його за допомогою абсолютного позиціонування та властивості transform.
Розташування поля сповіщень на екрані можна змінити змінюючи його верхні та ліві властивості. Приклад: у цьому прикладі демонструється спеціальне вікно сповіщення, оформлене за допомогою CSS, яке запускається натисканням кнопки. Ми також можемо створити спеціальну функцію сповіщень для показу вікна сповіщень.
Ми можемо вирівняти текстовий вміст по центру за допомогою JavaScript, маніпулюючи властивостями CSS елемента. Це можна зробити за допомогою вибір елемента та встановлення властивості "text-align" на "center". Крім того, ми також можемо використовувати властивість "margin", щоб налаштувати позиціонування елемента.
Створіть HTML-файл із базовою структурою, включаючи кнопку для запуску спеціального вікна сповіщення. Потім імпортуйте бібліотеку SweetAlert2, додавши відповідний тег <link> у розділ <head> вашого HTML-файлу для CSS і тег <script> перед закриваючим тегом <body> для JavaScript.
ляпнути є заміною JavaScript для стандартних функцій alert(), prompt() і confirm() у JavaScript. Еквіваленти в blurt: alert() -> blurt() prompt() -> brompt()
Як центрувати елемент HTML за допомогою JavaScript
- var img = нове зображення(), body = документ. getElementsByTagName("тіло")[0]; малюнок …
- var imageWidth = img. offsetWidth, imageHeight = img. …
- малюнок onload = function(){ var imageWidth = this. …
- var vpWidth = документ. documentElement.