Показать сообщение отдельно
  #1 (permalink)  
Старый 26.07.2019, 12:05
Новичок на форуме
Отправить личное сообщение для neowaring Посмотреть профиль Найти все сообщения от neowaring
 
Регистрация: 25.07.2019
Сообщений: 7

Помогите с отображением модального окна
Есть код

<!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 метров (гектосекунд), вылазило модальное окно.
Ответить с цитированием