Javascript

Модальное окно на чистом javascript

Модальное окно на чистом 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();
}


Возврат к списку

Территориально я нахожусь в Санкт-Петербурге, но могу и готова работать со всеми, вне зависимости от вашего местоположения. Вы можете написать мне через форму обратной связи, либо связаться через социальные сети. Ознакомиться с портфолио можно здесь и здесь.

Социальные сети

Карусель работ

Рандом новостей