Привет кодерам!! В этой статье создается Всплывающее сообщение с использованием HTML и CSS. В этом проекте мы создадим кнопку, и когда пользователь нажмет на нее, на экране будет отображаться всплывающее сообщение с некоторым содержимым. Этот проект прост и подходит для начинающих.
Я надеюсь, что у вас должно быть представление о проекте.
Итак, давайте начнем проект расширяемого контента, добавив исходные коды. Сначала мы используем HTML-код.
Шаг 1: HTML-код всплывающего сообщения
HTML означает язык разметки гипертекста, и он обеспечивает структуру нашего веб-сайта.
ВСЕ HTML-документы начинаются с ‹!doctype HTML›, что информирует браузер о том, что наш код соответствует самой последней версии HTML.
HTML-документ начинается с ‹html› и заканчивается на ‹/html›.
Основной тег ‹body›, куда мы будем писать весь наш контент, который позже будет отображаться в браузере.
Теперь посмотрим на наш HTML-код.
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="" content="" /> <title>Popup Message</title> <link rel="stylesheet" href="style.css" /> </head> <body> <h1>Popup Message</h1> <div class="box"> <a class="button" href="#popup1">Let me Pop up</a> </div> <div id="popup1" class="overlay"> <div class="popup"> <h2>Here i am</h2> <a class="close" href="#">×</a> <div class="content"> Thank to pop me out of that button, Please follow us <a href="https://www.codewithrandom.com/" target="_blank">@codeWithrandom</a> </div> </div> </div> </body> </html>
- Во-первых, мы будем использовать тег H1 для создания основного заголовка нашей веб-страницы.
- Теперь мы создадим div, а внутри него сделаем кнопку с помощью тега button.
- Мы создали div с наложением классов, чтобы охватить все содержимое страницы при отображении всплывающего окна. Это заставляет пользователя закрывать всплывающее окно, прежде чем вернуться к содержимому страницы, а также создает приятный пользовательский опыт. Div с всплывающим окном класса будет нашим всплывающим окном, содержащим заголовок и значок закрытия всплывающего окна. Div с содержимым класса будет содержать содержимое нашего всплывающего окна.
Теперь давайте посмотрим на наш вывод
Вывод:
Итак, мы добавили теги HTML и их содержимое. Теперь пришло время сделать его привлекательным, добавив код CSS.
Шаг 2: CSS-код для всплывающего сообщения
Каскадные таблицы стилей — это язык таблиц стилей, который используется для описания представления документа, написанного на языке разметки, таком как HTML или XML.
Теперь посмотрим на наш CSS-код.
body { font-family: Arial, sans-serif; background: url(http://www.shukatsu-note.com/wp-content/uploads/2014/12/computer-564136_1280.jpg) no-repeat; background-size: cover; height: 100vh; overflow: hidden; } h1 { text-align: center; font-family: Tahoma, Arial, sans-serif; color: #fff; margin: 80px 0; } .box { width: 40%; margin: 0 auto; background: rgba(255,255,255,0.2); padding: 35px; border: 2px solid #fff; border-radius: 20px/50px; background-clip: padding-box; text-align: center; } .button { font-size: 1em; padding: 10px; color: #fff; border: 2px solid #06D85F; border-radius: 20px/50px; text-decoration: none; cursor: pointer; transition: all 0.3s ease-out; } .button:hover { background: #06D85F; } .overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; } .overlay:target { visibility: visible; opacity: 1; } .popup { margin: 70px auto; padding: 20px; background: #fff; border-radius: 5px; width: 30%; position: relative; transition: all 5s ease-in-out; } .popup h2 { margin-top: 0; color: #333; font-family: Tahoma, Arial, sans-serif; } .popup .close { position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333; } .popup .close:hover { color: #06D85F; } .popup .content { max-height: 30%; overflow: auto; } @media screen and (max-width: 700px){ .box{ width: 70%; } .popup{ width: 70%; } }
Теперь, когда мы включили наш код CSS в нашу статью, давайте рассмотрим его шаг за шагом.
Шаг 1. Сначала мы выбрали тег body и установили семейство шрифтов Arial, фон — изображение и размер фона для покрытия. Мы установили Overflow на hidden, чтобы предотвратить нежелательную горизонтальную прокрутку и лишние пробелы в вашем проекте, когда элементы существуют за пределами области просмотра.
Теперь мы стилизуем наш основной заголовок веб-страницы с помощью тега h1. Мы выровняли текст по центру и закрасили его белым цветом, а верхнее и нижнее поля — 80 пикселей.
body { font-family: Arial, sans-serif; background: url(http://www.shukatsu-note.com/wp-content/uploads/2014/12/computer-564136_1280.jpg) no-repeat; background-size: cover; height: 100vh; overflow: hidden; } h1 { text-align: center; font-family: Tahoma, Arial, sans-serif; color: #fff; margin: 80px 0; }
Шаг 2.Используя класс «.box», мы установим ширину нашего тега div на 40 % и отступ на 35 пикселей. Установите выравнивание текста по центру и границу на 2 пикселя сплошного белого цвета.
Используя класс (.button), мы определяем ширину и отступ нашей кнопки как 1rem и 35px соответственно. Мы также добавили переход к нашей кнопке. Мы также добавили селектор наведения; когда пользователь наводит курсор на кнопку, цвет фона меняется на зеленый.
.box { width: 40%; margin: 0 auto; background: rgba(255,255,255,0.2); padding: 35px; border: 2px solid #fff; border-radius: 20px/50px; background-clip: padding-box; text-align: center; } .button { font-size: 1em; padding: 10px; color: #fff; border: 2px solid #06D85F; border-radius: 20px/50px; text-decoration: none; cursor: pointer; transition: all 0.3s ease-out; } .button:hover { background: #06D85F; }
Шаг 3. Теперь мы определяем положение нашего всплывающего окна как фиксированное с помощью класса «.overlay». Установите поля и отступы на ноль. Видимость скрыта, а непрозрачность установлена на ноль. Когда мы выбираем «.overlay: target», для видимости устанавливается значение visible, а для opacity — 1.
.overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; } .overlay:target { visibility: visible; opacity: 1; }
Шаг 4. Теперь мы стилизуем наш h2, используя класс «.popup», с нулевым верхним полем и семейством шрифтов Tahoma. Мы определили положение нашего значка закрытия как абсолютное значение, размер шрифта 20 пикселей и жирность шрифта, используя класс «.popup.close».
.popup { margin: 70px auto; padding: 20px; background: #fff; border-radius: 5px; width: 30%; position: relative; transition: all 5s ease-in-out; } .popup h2 { margin-top: 0; color: #333; font-family: Tahoma, Arial, sans-serif; } .popup .close { position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333; } .popup .close:hover { color: #06D85F; } .popup .content { max-height: 30%; overflow: auto;
Шаг 5. На этом шаге мы сделаем нашу веб-страницу максимально отзывчивой, используя медиа-запрос, чтобы установить максимальную ширину экрана на 700 пикселей. Ширина всплывающего окна будет составлять 70%, если размер экрана равен или меньше указанного нами размера экрана.
@media screen and (max-width: 700px){ .box{ width: 70%; } .popup{ width: 70%; } }
Теперь мы завершили наш код css, и ниже приведен результат после стилизации нашей веб-страницы.
Окончательный вывод всплывающего сообщения с использованием HTML:
Теперь, когда мы закончили наш проект, теперь посмотрим, как он работает.
Теперь мы успешно создали наше Всплывающее сообщение с кодом. Вы можете использовать этот проект для своей личной веб-страницы, и мы надеемся, что вы поняли проект. Если вы сомневаетесь, не стесняйтесь комментировать!
Если вы обнаружите, что этот блог полезен, обязательно выполните поиск codewithrandom в Google для проектов внешнего интерфейса с исходными кодами и обязательно следуйте коду со случайной страницей Instagram.
Подписаться: codewithrandom
Написал: Арун
Код: Пракаш
Какой редактор кода вы используете для этого всплывающего сообщения?
Я лично рекомендую использовать VS Code Studio, он прост и удобен в использовании.
Является ли этот проект адаптивным или нет?
Да, это всплывающее сообщение является адаптивным проектом
Используете ли вы какие-либо внешние ссылки для создания этого проекта?
Нет, мы используем чистый код Html и Css для всплывающих сообщений.