Модальное окно на HTML и JavaScript

Также - модальное окно через 10 сек

Кнопка вызова модального окна:

<button id="any-button">Заказать звонок</button>

HTML Разметка модального окна

<div id="callback" class="modal">
    <!-- Содержимое окна -->
    <div class="modal-content animate-zoom">
        <span class="close">&times;</span>
        <span class="modal-title">Заказать звонок</span>
        <form action="#">
            <input type="text" placeholder="Имя">
            <input type="text" placeholder="Телефон">
            <input type="submit" value="Отправить">
        </form>
    </div>
</div>

Стили CSS

/* Модальное окно */
.modal {display: none; position: fixed; z-index: 9999; left: 0;  top: 0;  width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4);}
/* Контент модального окна */
.modal-content { background-color: #fefefe;  margin: 15% auto; padding: 20px;  border: 1px solid #888;  width: 80%; max-width: 350px;  position: relative;}
/* The Close Button */
.close {color: #aaa;  float: right;  font-size: 28px;  font-weight: bold;  position: absolute;  right: 10px;  top: 5px;}
.close:hover, .close:focus {color: black;  text-decoration: none;  cursor: pointer;} 
.modal-title{display: block;  font-size: 18px;  font-weight: bold;  text-align: center;  margin-bottom: 30px;}
form input[type="text"]{ display: block;  width: 100%;  height: 44px;  line-height: 44px;  border: 1px solid #ccc;  margin-bottom: 10px;}
button, form input[type="submit"]{display: block;  background: green;  color: #fff;  border: none;  height: 44px;  line-height: 44px;  padding: 0px 20px;}
/* Добавляем анимацию появления*/
.animate-zoom {-webkit-animation: animatezoom 0.6s;  animation: animatezoom 0.6s}
@-webkit-keyframes animatezoom {from {-webkit-transform: scale(0)} to {-webkit-transform: scale(1)}}
@keyframes animatezoom {from {transform: scale(0)}  to {transform: scale(1)}}

 jаvascript

// Получаем кнопку
var btn = document.getElementById("any-button");

// Получаем кнопку закрытия окна
var span = document.getElementsByClassName("close")[0];

// При нажатии на кнопку, делаем видимым блок
btn.onclick = function() {
    modal.style.display = "block";
}

// При нажатии на крестик, "закрываем окно"" путем превращения его в невидиое 
span.onclick = function() {
    modal.style.display = "none";
}

// Нажатие на любую точку за пределами окна также закрывает окошко
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}