Есть код
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.am-gift-block{}
.am-gift-block__title{font-family:'Open Sans', sans-serif;font-weight:700;color: #000000;font-size: 13px;line-height:14px;text-align:center;}
.am-gift-block__healp{background-color: #2fb519;border-radius:25px;width: 20px;color: #fff;height: 20px;display:inline-block;line-height: 20px;cursor:pointer;position:relative;}
.am-gift-block__healp-popup{width:256px;position:absolute;left:-9999px;top:32px;margin:0px;padding:10px 15px;opacity:0;z-index:200;font-size: 11px;line-height: 1.3;color: #fff;text-align:left;-moz-border-radius:4px;-webkit-border-radius:4px;-khtml-border-radius:4px;border-radius:4px;background: rgba(0, 0, 0, 0.8);-webkit-transition:opacity 0.15s ease 0s;-moz-transition:opacity 0.15s ease 0s;-o-transition:opacity 0.15s ease 0s;transition:opacity 0.15s ease 0s;}
@media (min-width:1014px) and (max-width:1253px){
.am-gift-block__healp-popup{width:182px;}
}
@media (min-width:788px) and (max-width:1013px){
.am-gift-block__healp-popup{width:190px;}
}
@media screen and (max-width:787px){
.am-gift-block__healp-popup{width:182px;}
.am-gift-block__healp:hover .am-gift-block__healp-popup{left:-172px!important;}
.am-gift-block__healp-popup::after{left:198px!important;}
}
.am-gift-block__healp:hover .am-gift-block__healp-popup{left:18px;opacity:1;}
.am-gift-block__healp-popup::after{width:0px;height:0px;position:absolute;top:-11px;left:4px;margin:0px;padding:0px;content:"";border-bottom: 11px solid rgba(0, 0, 0, 0.8);border-right:11px solid transparent;-webkit-transition:all 0.15s ease 0s;-moz-transition:all 0.15s ease 0s;-o-transition:all 0.15s ease 0s;transition:all 0.15s ease 0s;}
.am-gift{width:396px;margin:0px 0px 0px -198px;padding:0px;}
@media screen and (max-width:787px){.am-gift{width:auto;margin:0px;}
}
.am-timer{background-color:#2FB519;background-image:url(/test/am-gift__icon.png);background-repeat:no-repeat;background-position: 10px 50%;border-radius:5px;margin: 1px auto;padding: 4px 0px 0px 40px;width: 135px;height: 40px;box-sizing:border-box;cursor:default;}
.am-timer__block{margin:0 6px;float:left;text-align:center;}
.am-timer__quantity{font-family:'Open Sans', sans-serif;font-weight:700;color:#fff;font-size:18px;line-height:1;margin-bottom:1px;}
.am-timer__unit{font-family:'Open Sans', sans-serif;font-weight:400;color:#fff;font-size:12px;line-height:1;}
</style>
</head>
<body>
<div class="am-gift-block">
<div class="am-gift-block__title">
Дарим пластик
<span class="am-gift-block__healp">?<span class="am-gift-block__healp-popup">Пока крутится счетчик вы копите бесплатные метры пластика. Чтобы получить накопленный пластик - дождитесь максимального значения (20 метров), и следуйте инструкциям.</span></span>
</div>
<div class="am-timer">
<div class="am-timer__block">
<div id="minutes" class="am-timer__quantity am-timer__quantity_unit_m">
..
</div>
<div class="am-timer__unit">
метров
</div>
</div>
<div class="am-timer__block">
<div id="seconds" class="am-timer__quantity am-timer__quantity_unit_sm">
..
</div>
<div class="am-timer__unit">
см
</div>
</div>
</div>
</div>
<div id="info" hidden>Информация</div>
</div>
<script>
const isLapsed = "isLapsed1" in localStorage;
const minutesLabel = document.getElementById("minutes");
const secondsLabel = document.getElementById("seconds");
const infoElement = document.getElementById("info");
if(isLapsed) {
infoElement.hidden = false;
} else {
const startTime = Date.now();
(function loop() {
const passedSeconds = 0.001 * (Date.now() - startTime);
secondsLabel.innerHTML = parseInt(passedSeconds % 100).toString().padStart(1, "0");
minutesLabel.innerHTML = parseInt(passedSeconds / 100).toString().padStart(1, "0");
if(passedSeconds >= 2000) {
infoElement.hidden = false;
localStorage.isLapsed = true;
} else {
setTimeout(loop, 500);
}
})();
}
</script>
</body>
</html>
Нужно что бы при достижении 20 метров (гектосекунд), вылазило модальное окно.
