Адаптивное модальное окно

293

08 августа 2018, 19:30

Есть кнопка:

<a href="#" class="to_contact">Нажать</a>

Нужно, чтобы при нажатии ее, по середине экрана появлялось адаптивное модальное окно с 3 полями для ввода и 2 кнопками закрыть и продолжить.

Как реализовать это без bootstrap?

Answer 1

Вот, пожалуйста:

.modalDialog { 
  overflow: auto; 
  position: fixed; 
  font-family: Arial, Helvetica, sans-serif; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0; 
  background: rgba(0, 0, 0, 0.8); 
  z-index: 99999; 
  display: none; 
} 
 
.modalDialog:target { 
  display: block; 
  pointer-events: auto; 
} 
 
.modalDialog>div { 
  width: 400px; 
  position: relative; 
  margin: 20% auto; 
  padding: 5px 20px 13px 20px; 
  border-radius: 10px; 
  background: #fff; 
} 
 
.close { 
  background: #606061; 
  color: #FFFFFF; 
  line-height: 25px; 
  position: absolute; 
  right: -12px; 
  text-align: center; 
  top: -10px; 
  width: 24px; 
  text-decoration: none; 
  font-weight: bold; 
}

<a href="#openModal">Открыть модальное окно</a> 
 
<div id="openModal" class="modalDialog"> 
  <div> 
    <a href="#close" title="Закрыть" class="close">x</a> 
    <h2>Модальное окно</h2> 
    <input type="text"><br> 
    <input type="text"><br> 
    <input type="text"><br> 
    <a href="#">Продолжить</a><br> 
  </div> 
</div>