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

Возникла необходимость сделать скелет формирования модального окна на JavaScript при нажатии кнопки на странице сайта (без использования Bootstrap и JQuery).
Модальное окно - это контейнер, который при нажатии ссылки всплывает и предоставляет какую-либо информацию.

Рассмотрим, что получилось.

Код HTML
Прописываем ссылку, которая будет "открывать" модальное окно при нажатии кнопки. Модальное окно будет формироваться в элементе div id="myModal"

<button id="myBtn" onclick="open_modal()">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<!-- Далее в данный блок добавляются элементы
с помощью javascript для создания модального окна -->
</div>


Код CSS
Стили CSS являются обязательными для создания модального окна.
С помощью z-index мы указываем насколько модальное окно идентифицируется после нажатии ссылки "открыть", а также "закрыть". Также display: none, который позволяет скрывать модальное окно до нажатия ссылки.

<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0, 0, 0); /* Fallback color */
background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
/* Fade in the background */
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s
}

/* Modal Content */
.modal-content {
position: fixed;
bottom: 0;
background-color: #fefefe;
width: 100%;
-webkit-animation-name: slideIn;
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s
}

/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}

.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}

.modal-body {
padding: 2px 16px;
}

.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}

/* Add Animation */
@-webkit-keyframes slideIn {
from {bottom: -300px;opacity: 0}
to {bottom: 0;opacity: 1}
}

@keyframes slideIn {
from {bottom: -300px;opacity: 0}
to {bottom: 0;opacity: 1}
}

@-webkit-keyframes fadeIn {
from {opacity: 0}
to {opacity: 1}
}

@keyframes fadeIn {
from {opacity: 0}
to {opacity: 1}
}

</style>

Код JavaScript
На JavaScript реализуем создание элемента div id="modal-content" в родительском элементе div id="myModal".
Далее в созданном элементе будет дополнительно создано 3 новых элемента div для вывода информации: header, body и footer.
В элементе header расположена кнопка закрытия окна close, которая скрывает модальное окно от пользователя (display = "none")
При новом открытии модального окна предварительно удаляются все элементы, которые были созданы в родительском элементе div id="myModal"

function open_modal() {
var modal = document.getElementById('myModal');
// удаление всех дочерних узлов с формы
var container = document.getElementById('myModal');
while (container.firstChild) {
container.removeChild(container.firstChild);
}

//<-- Modal content -->
var modal_content = document.createElement('div');
modal_content.id = 'modal-content';
modal_content.className = 'modal-content';
document.getElementById('myModal').appendChild(modal_content);
//<-- Modal content -> Modal header -->
var modal_header = document.createElement('div');
modal_header.id = 'modal-header';
modal_header.className = 'modal-header';
modal_header.innerHTML = '<h2>Modal Header</h2>';
document.getElementById('modal-content').appendChild(modal_header);

//кнопка закрытия окна. Позиция: в начало элемента 'modal-header'
var close = document.createElement('span');
close.id = 'close';
close.className = 'close';
close.innerHTML = '&times;';

//Элемент добавляется в начало блока "modal-header" с помощью firstElementChild:
document.getElementById('modal-header').insertBefore(close, document.getElementById('modal-header').firstElementChild);
//Делаем обработчик события для закрытия модального окна
close.onclick = function() {
//производим какие-то действия
modal.style.display = "none";
//предотвращаем переход по ссылке href
return false;
}

//<-- Modal content -> Modal body -->
var modal_body = document.createElement('div');
modal_body.id = 'modal-body';
modal_body.className = 'modal-body';
modal_body.innerHTML = '<h4>Modal Content</h4>';
document.getElementById('modal-content').appendChild(modal_body);
//<-- Modal content -> Modal footer -->
var modal_footer = document.createElement('div');
modal_footer.id = 'modal-footer';
modal_footer.className = 'modal-footer';
modal_footer.innerHTML = '<h3>Modal Footer</h3>';
document.getElementById('modal-content').appendChild(modal_footer);
modal.style.display = "block";
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
}

Представленный выше "скелет" модального окна можно использовать следующим образом:
1.В html-коде от кнопки Вы можете вызвать новую функцию, например, new_modal_user().
2.В JavaScript-коде добавить функцию new_modal_user(), которая запускает функцию "скелета" модального окна (open_modal()), а далее пишите необходимые изменения и дополнения.
Таким образом, Вы можете на базе open_modal() формировать много различных модальных окон с разной информацией.

function new_modal_user() {
open_modal();
//Далее вносите необходимые изменения....
var modal_header = document.getElementById('modal-header');
modal_header.innerHTML = '<h2>Modal Header</h2>';
var modal_body = document.getElementById('modal-body');
modal_body.innerHTML = '<h4>Modal Content</h4>';
var modal_footer = document.getElementById('modal-footer');
modal_footer.innerHTML = '<h3>Modal Footer</h3>';
}