Модальное окно на чистом javascript
Стенограмма видео
Верстка:
<span onclick="openWin();">Заказать звонок</span> <div class="modal"> <h1>Заказать звонок</h1> <form> <input type="text" placeholder="Ваше имя"><br> <input type="text" placeholder="Ваш телефон"><br> <input type="submit" value="Отправить"> </form>> </div>
Стили:
body {padding: 0; margin: 0;}
span {cursor: pointer}
.modal {position: absolute; width: 300px; margin-left: -150px; left: 50%; top: -100%; padding: 20px; background: #fff; border: 1px solid #333; z-index: 9999; transition: all 0.5s ease-in;}
.overflow {width: 100%; height: 100%; z-index: 9998; background: rgba(0,0,0,0.7); position: absolute; top: 0;}
Скрипт js:
var modal = document.querySelector('.modal');
var overflow = document.createElement('div');
function openWin() {
overflow.className = "overflow";
document.body.appendChild(overflow);
var height = modal.offsetHeight;
modal.style.marginTop = - height / 2 + "px";
modal.style.top = "50%";
}
if (!Element.prototype.remove) {
Element.prototype.remove = function remove() {
if (this.parentNode) {
this.parentNode.removeChild(this);
}
};
}
overflow.onclick = function () {
modal.style.top = "-100%";
overflow.remove();
}