10 Стильных
всплывающих окон

Трендовые и простые в разработке всплывающие и диалоговые окно. То что надо для UX/UI проекта.

1. Двойное окно с ссылкой

HTML

<div class="modal">
     Click
    <label class="modal__label" for="modal__checkbox">here</label>
      <input class="modal__checkbox" id="modal__checkbox" type="checkbox">
     to open modal window
 <div class="modal__window">
     <div class="modal__content">
     <label class="modal__close-icon" for="modal__checkbox"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" class="svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512">
     <path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path>
      </svg></label>
 <input class="modal__checkbox" id="modal__checkbox" type="checkbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/99/Fog_forrest_frickberg.jpg" />
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>

CSS

.article__description
{
font-family: regular;
font-style: normal;
font-weight: 400;
font-size: 2.25rem;
line-height: 2.75rem;
letter-spacing: -0.06em;
color: #FFFFFF;
margin-right: 16.25vw;
margin-top: 0px;
}
.article__subheadline
{
font-family: regular;
font-style: normal;
font-weight: 400;
font-size: 2.25rem;
line-height: 2.75rem;
letter-spacing: -0.06em;
text-decoration-line: underline;
color: #FFFFFF;
}

1. Окно для входа в систему

HTML

<div class="modal">
     Click
    <label class="modal__label" for="modal__checkbox">here</label>
      <input class="modal__checkbox" id="modal__checkbox" type="checkbox">
     to open modal window
 <div class="modal__window">
     <div class="modal__content">
     <label class="modal__close-icon" for="modal__checkbox"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" class="svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512">
     <path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path>
      </svg></label>
 <input class="modal__checkbox" id="modal__checkbox" type="checkbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/99/Fog_forrest_frickberg.jpg" />
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>

CSS

JavaScript

const body = document.querySelector("body");
const modal = document.querySelector(".modal");
const modalButton = document.querySelector(".modal-button");
const closeButton = document.querySelector(".close-button");
const scrollDown = document.querySelector(".scroll-down");
let isOpened = false;

const openModal = () => {
  modal.classList.add("is-open");
  body.style.overflow = "hidden";
};

const closeModal = () => {
  modal.classList.remove("is-open");
  body.style.overflow = "initial";
};

window.addEventListener("scroll", () => {
  if (window.scrollY > window.innerHeight / 3 && !isOpened) {
    isOpened = true;
    scrollDown.style.display = "none";
    openModal();
  }
});

modalButton.addEventListener("click", openModal);
closeButton.addEventListener("click", closeModal);

document.onkeydown = evt => {
  evt = evt || window.event;
  evt.keyCode === 27 ? closeModal() : false;
};

10 Стильныхвсплывающих окон

1. Двойное окно с ссылкой

1. Окно для входа в систему

10 Стильных
всплывающих окон