Скачать Всплывающее модальное окно (Popup Modal) HTML/CSS и JavaScript

ⓜⓨⓤⓢⓛⓘ · 12 Фев 2022

Привет, читатель, я надеюсь, что у тебя все хорошо. Сегодня мы научимся создавать анимированные всплывающие модальные окна с использованием HTML, CSS и JavaScript.

Всплывающее модальное окно - это специальный дизайн или шаблон, который появляется, когда пользователь нажимает или наводит курсор на кнопки, меню или текстовое содержимое, чтобы показать важность информационного контента для пользователей.

Давайте взглянем на данное изображение наших проектов [Анимированное всплывающее модальное окно], там есть одно изображение кого-то с именем и его профессией, в правом углу которого мы видим кнопку закрытия. В середине мы видим одно окно сообщения, а две кнопки находятся внизу. На самом деле, это всплывающая версия наших проектов, первый интерфейс - скрытая форма.

Всплывающее модальное окно в HTML, CSS и JavaScript
Привет, читатель, я надеюсь, что у тебя все хорошо. Сегодня мы научимся создавать анимированные всплывающие модальные окна с использованием HTML, CSS и JavaScript. Как вы знаете, ранее я создал модальное окно с использованием HTML и CSS, которое вам, ребята, так понравилось, и некоторые из вас попросили меня создать всплывающее модальное окно с использованием JavaScript. Итак, теперь мы собираемся создать это всплывающее модальное окно с красивой анимацией.

Всплывающее модальное окно - это специальный дизайн или шаблон, который появляется, когда пользователь нажимает или наводит курсор на кнопки, меню или текстовое содержимое, чтобы показать важность информационного контента для пользователей.

Давайте взглянем на данное изображение наших проектов [Анимированное всплывающее модальное окно], там есть одно изображение кого-то с именем и его профессией, в правом углу которого мы видим кнопку закрытия. В середине мы видим одно окно сообщения, а две кнопки находятся внизу. На самом деле, это всплывающая версия наших проектов, первый интерфейс - скрытая форма.

Скорее, чем теоретически, я бы настоятельно рекомендовал вам посмотреть видеоурок нашей программы [Всплывающее модальное окно в HTML CSS и JavaScript], посмотрев этот видеоурок, вы узнаете реальную демонстрацию нашего всплывающего модального окна и получите все идеи о HTML CSS и JavaScript коде, которые я использовал для создания этого красивого шаблона всплывающего модального окна с красивой анимацией.

Я предоставил все коды HTML, CSS и JavaScript, которые я использовал для создания этого всплывающего модального окна, прежде чем перейти к файлу исходного кода, вам нужно знать некоторые важные объяснения этого видеоурока всплывающего модального окна.

Если вам интересно создать это всплывающее модальное окно с помощью HTML и CSS, я уже опубликовал это всплывающее модальное окно с исходным кодом, и вы можете пойти на это. Исходный код этой программы вы получите ниже.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--<title>Popup Modal Box</title>-->
    <link rel="stylesheet" href="style.css">
    <!-- Fontawesome CDN Link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>

    <!-- Boxicons CSS -->
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
      <section>
          <div class="profile">
              <div class="profile-img">
                  <img src="profile.jpg" alt="">
              </div>
              <span class="name">Prem Shahi</span>
              <span class="profession">Web & App Designer</span>
              <div class="button">
                <i class='bx bxs-envelope'></i>
                <button>Hire Me</button>
              </div>
          </div>
          <div class="popup-outer">
              <div class="popup-box">
                <i id="close" class='bx bx-x close'></i>
                  <div class="profile-text">
                      <img src="profile.jpg" alt="">
                      <div class="text">
                          <span class="name">Prem Shahi</span>
                          <span class="profession">Web & App Designer</span>
                      </div>
                  </div>
                  <textare placeholder="Enter your message"></textare>
                  <div class="button">
                      <button id="close" class="cancel">Cancel</button>
                      <button class="send">Send</button>
                  </div>
              </div>
          </div>
      </section>

    <script src="script.js"></script>
</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    overflow: hidden;
}
section{
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
section .profile{
    display: flex;
    flex-direction: column;
    align-items: center;
}
section.active .profile{
    display: none;
}
.profile .profile-img{
    background-color: #4070F4;
    padding: 2px;
    border-radius: 50%;
    height: 100px;
    width: 100px;
    margin-bottom: 10px;
}
.profile .profile-img img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    border: 3px solid #fff;
    border-radius: 50%;
}
.profile .name{
    font-size: 18px;
    font-weight: 500;
    color: #333;
}
.profile .profession{
    font-size: 18px;
    font-weight: 400;
    margin-top: -6px;
    color: #333;
}
.profile .button{
    display: flex;
    align-items: center;
    background: #4070f4;
    padding: 12px 20px;
    border-radius: 6px;
    margin-top: 15px;
    transition: all 0.3s ease;
    cursor: pointer;
}
.profile .button:hover{
    background: #275df1;
}
.profile .button i{
    font-size: 18px;
    margin-right: 5px;
    color: #fff;
}
.profile .button button{
    background: none;
    display: inline-block;
    outline: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
}
/* pop up box styling */
section .popup-outer{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.3);
    position: absolute;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
    transform: scale(1.2);
    transition: opacity 0.2s 0s ease-in-out,
                transform 0.2s 0s ease-in-out;
}
section.active .popup-outer{
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}
section .popup-box{
    position: relative;
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    max-width: 380px;
    width: 100%;
}
.popup-box .close{
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 24px;
    color: #b4b4b4;
    transition: all 0.2s ease;
    cursor: pointer;
}
.popup-box .close:hover{
    color: #333;
}
.popup-box .profile-text{
    display: flex;
    margin-bottom: 20px;
    align-items: center;
}
.popup-box .profile-text .text{
    display: flex;
    flex-direction: column;
    margin-left: 15px;
}
.profile-text .text .name{
    font-size: 14px;
    font-weight: 400;
}
.profile-text .text .profession{
    font-size: 12px;
    font-weight: 500;
    margin-top: -4px;
}
.popup-box img{
    height: 60px;
    width: 60px;
    object-fit: cover;
    border-radius: 50%;
}
.popup-box textarea{
    min-height: 140px;
    width: 100%;
    resize: none;
    outline: none;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    padding: 10px 10px 10px 14px;
    font-weight: 400;
    background: #f3f3f3;
}
.popup-box .button{
    display: flex;
    justify-content: flex-end;
}
.popup-box .button button{
    outline: none;
    border: none;
    margin-left: 10px;
    background: #6f93f6;
    padding: 6px 12px;
    border-radius: 4px;
    margin-top: 15px;
    transition: all 0.3s ease;
    cursor: pointer;
    color: #fff;
    font-size: 14px;
    transition: all 0.3s ease;
}
.button button.cancel{
    background: #f082ac;
}
.button button.cancel:hover{
    background: #ec5f95;
}
.button button.send:hover{
    background: #275df1;
}

Скачать бесплатно:

Скачать Всплывающее модальное окно (Popup Modal) HTML/CSS и JavaScript

ⓜⓨⓤⓢⓛⓘ

Вложения