ArtemY777,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.modal {
display: none;
background-color: #808080;
}
body {
height: 2000px;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.querySelector(".closex");
btn.addEventListener("click", function(event) {
event.preventDefault();
modal.style.display = "block";
document.body.style.overflow = "hidden"
})
function close() {
modal.style.display = "";
document.body.style.overflow = ""
}
span.addEventListener("click", close)
document.addEventListener("click", function(event) {
var target = event.target;
if(target.closest(".modal") || target.closest(".modal-button-window")) return;
if(modal.style.display == "block") close()
})
});
</script>
</head>
<body>
<div class="modal-button-window">
<a id="myBtn">Не знаете код краски?</a>
</div>
<div id="myModal" class="modal">
<div class="modal-content-window">
<div class="modal-block">
<button class="closex" data-dismiss="modal">x</button>
<div class="modal-body">
<p>текст</p>
</div>
</div>
</div>
</div>
</body>
</html>