Пример HTML, CSS и JavaScript кода для создания модального окна

HTML:

<!-- Кнопка для открытия модального окна -->
<button id="myBtn">Открыть модальное окно</button>

<!-- Модальное окно -->
<div id="myModal" class="modal">

<!-- Содержимое модального окна -->
<div class="modal-content">
<span class="close">&times;</span>
<p>Привет, я модальное окно!</p>
</div>

</div>

CSS:

/* Стили модального окна */
.modal {
display: none; /* скрыть по умолчанию */
position: fixed; /* абсолютное позиционирование */
z-index: 1; /* поверх других элементов */
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto; /* добавить прокрутку, если содержимое слишком большое */
background-color: rgba(0,0,0,0.4); /* затемнение фона */
}

/* Стили содержимого модального окна */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* центрирование по вертикали и горизонтали */
padding: 20px;
border: 1px solid #888;
width: 80%;
}

/* Стили кнопки закрытия модального окна */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}

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

JavaScript:

// Получить модальное окно
var modal = document.getElementById("myModal");

// Получить кнопку, которая открывает модальное окно
var btn = document.getElementById("myBtn");

// Получить элемент <span>, который закрывает модальное окно
var span = document.getElementsByClassName("close")[0];

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

// Когда пользователь нажимает на <span> (x), закрывается модальное окно
span.onclick = function() {
modal.style.display = "none";
}

// Когда пользователь нажимает вне модального окна, закрывается модальное окно
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}