Модальное окно выезжающее справа на CSS

Модальное окно выезжающее справа на CSS

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

Пример

Открыть

HTML


<!-- Модальное окно -->
<a class="btn-modal" href="#modal-block">Открыть</a>
<!-- Содержимое модального окна -->
<div id="modal-block">
  <a class="close-block" href="#close-block">X</a>
  <h3>Lorem ipsum</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

CSS


/* Кнопка */
.btn-modal {
  cursor: pointer;
  padding: 1rem 3rem;
  color: #fff;
  text-decoration: none;
  background-color: #83bec5;
  transition: all 0.3s ease-out;
}
.btn-modal:hover {
  background-color: #527c82;
}

/* Модальное окно */
#modal-block { 
  background-color:#527c82;
  color: #fff;
  position: fixed;
  top:0;
  left:-100vw;
  width:100vw;
  height: 100vh;
  transition: all .5s;
  font-family: 'Raleway', sans-serif;
  z-index: 9;

}
#modal-block:target{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction: column;
  left:0;
}

/* Заголовкии текст */
#modal-block h3{
  margin: 20px 0;
  font-size: 1.7em;
}
#modal-block p{
  width: 50%;
  text-align:justify;
}

/* Кнопка закрыть */
.close-block{
  display: flex;
  position: absolute;
  top: 25%;
  right: 25%;
  padding: .5em;
  background-color: #fff;
  color: #527c82;
  text-decoration: none;
  font-size: 1em;
  box-sizing: border-box;
}
Скачать исходники
By julia