Alessio18911,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.page {
position: relative;
width: 400px;
height: 500px;
background-color: seagreen;
}
.shim-modal-content {
display: none;
position: fixed;
width: 100%;
height: 100%;
background-color: grey;
}
.modal-content-window {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 350px;
transform: translate(-50%, -50%);
background-color: lightgreen;
}
.shim-modal-show {
display: block;
}
</style>
</head>
<body>
<div class="page">
<div class="shim-modal-content">
<div class="modal-content-window">
<input name="" type="button" value="X" class="close">
<form action="http://">
<input name="" type="submit" value="send" class="send">
</form></div>
</div>
</div>
<script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script>
<script>
window.addEventListener('DOMContentLoaded', function() {
var page = document.querySelector(".page");
var shimModalContent = document.querySelector(".shim-modal-content");
page.addEventListener("click", function(event){
var target = event.target;
if(target.closest(".modal-content-window") && !target.closest(".send") && !target.closest(".close"))
event.stopPropagation();
else if( target.closest(".shim-modal-content") )
shimModalContent.classList.remove("shim-modal-show");
else shimModalContent.classList.add("shim-modal-show");
});
});
</script>
</body>
</html>