Чтобы код работал:
1. Создайте карту в яндекс конструкторе карт, возьмите Javascript код и вставьте в форму.
2. И подпишитесь на меня в ВК (иначе не заработает) vk.com/ahmedes
<div class="map">
<div class='map-text'>Нажмите, чтобы<br/>разблокировать карту</div>
<div class="map-overlay"></div>
<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A5314a6bfca45a4be6695eba38f356e3beb09fc887c4d0c9be34f1f5a56498973&width=100%&height=454&lang=ru_RU&scroll=true"></script>
</div>
<style>
.map {
width: 100%;
height: 100%;
display: flex;
flex-direction: column-reverse;
justify-content: space-around;
}
.map-text {
z-index: 20;
position: absolute;
color: white;
font-family: system-ui;
text-align: center;
width: 100%;
}
.map-overlay {
background-color: black;
opacity: 80%;
width: 100%;
height: 100%;
z-index: 10;
position: absolute;
}
@media screen and (min-width: 479px) {
.map-text, .map-overlay {
display: none;
}
}
</style>
<script>
$( document ).ready(function(e) {
$(document).click(function (e) {
if ($(e.target).closest(".map").length) {
$('.map-text, .map-overlay').hide()
return;
}
$('.map-text, .map-overlay').show()
});
});
</script>