Модельные окна накладываются одно на другое, при первом запуске.
Модельные окна накладываются одно на другое, при первом нажатии на либую кнопку связвнной с модельными окноми. После их закрытия при повторном нажатии все отображаеться верно. Но стоит перезагрузить страницу все повторяеться. Вот скрин: https://prnt.sc/uxw617
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>RunSmart</title>
<link rel="stylesheet" href="css/bootstrap-reboot.min.css">
<link rel="stylesheet" href="css/font.css">
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/tiny-slider.css">
<link rel="stylesheet" href="css/style.min.css">
</head>
<body>
<section class="promo">
<div class="container">
<header class="header">
<a href="#" class="header__logo">
<img src="icons/logo.png" alt="logo">
</a>
<div class="header__official">
Официальный представитель
<span>Garmin, Polar, Suunto</span>
</div>
<div class="header__contacts">
<a href="tel:+74999228974" class="header__phone">+7 (499) 922-89-74</a>
<button data-modal="consultation" class="button">заказать звонок</button>
</div>
</header>
<div class="promo__wrapper">
<h1 class="promo__header">Подбор пульсометра</h1>
<h2 class="promo__subheader">с учётом Вашего уровня подготовки</h2>
<div class="promo__icons">
<div class="promo__icon">
<img src="icons/main_screen/timer.png" alt="timer">
Время подбора:
10 минут
</div>
<div class="promo__icon">
<img src="icons/main_screen/hand-cart.png" alt="hand-cart">
Бесплатная
доставка
</div>
<div class="promo__icon">
<img src="icons/main_screen/massages.png" alt="massages">
Ответим
на все вопросы
</div>
</div>
<button data-modal="consultation" class="button button_main">заказать кОНСУЛЬТАЦИЮ</button>
<div class="promo__link">
или
<a href="#">ПЕРЕЙТИ В КАТАЛОГ</a>
</div>
</div>
</div>
</section>
<section class="advantages">
<div class="container">
<h2 class="title">НАШИ ПРЕИМУЩЕСТВА</h2>
<div class="advantages__wrapper">
<div class="advantages__item">
<img src="icons/advantages/cup.png" alt="cup">
<div class="advantages__subheader">
Делимся опытом
</div>
<div class="advantages__descr">
Наши сотрудники всегда готовы поделиться своим опытом, так как сами бегают полумарафоны, переплыли Босфор, готовятся к соревнованиям по триатлону!
</div>
</div>
<div class="advantages__item">
<img src="icons/advantages/heart.png" alt="heart">
<div class="advantages__subheader">
Заботимся о здоровье
</div>
<div class="advantages__descr">
Мы работаем для того, чтобы Ваши занятия спортом шли на пользу Вашему здоровью и были в радость Вам и Вашим близким!
</div>
</div>
<div class="advantages__item">
<img src="icons/advantages/shoe.png" alt="shoe">
<div class="advantages__subheader">
Учим бегать
</div>
<div class="advantages__descr">
Помогаем с обучением правильной технике бега! Дружим с крупнейшей школой бега в России - <a href="#">I LOVE RUNNING.</a>
</div>
</div>
</div>
</div>
</section>
<section class="consultation">
<div class="container">
<h2 class="title title_left">
Получите бесплатную консультацию <br>
по подбору пульсометра
</h2>
<div class="consultation__descr">
Просто заполните форму заявки <br>
и мы перезвоним вам в течении 10 минут
</div>
<form id="consultation-form" class="feed-form" action="#">
<input name="name" required placeholder="Ваше имя" type="text">
<input name="phone" required placeholder="Ваш телефон">
<input name="email" required placeholder="Ваш E-mail" type="email">
<button class="button button_submit">заказать консультацию</button>
</form>
</div>
</section>
<section class="corousel">
<div class="container">
<div class="corousel__inner">
<div>
<img src="img/slide/slide_1.jpg" alt="slide">
</div>
<div>
<img src="img/slide/slide_2.png" alt="slide">
</div>
<div>
<img src="img/slide/slide_3.png" alt="slide">
</div>
</div>
</div>
</section>
<section class="catalog">
<div class="container">
<h2 class="title">Каталог пульсометров</h2>
<ul class="catalog__tabs">
<li class="catalog__tab catalog__tab_active"><div>Для фитнеса</div></li>
<li class="catalog__tab"><div>Для бега</div></li>
<li class="catalog__tab"><div>для триотрона</div></li>
</ul>
<div class="catalog__content catalog__content_active">
<div class="catalog-item">
<div class="catalog-item__wrapper">
<div class="catalog-item__content catalog-item__content_active">
<img src="img/pulsometr.png" alt="pulsometr" class="catalog-item__img">
<div class="catalog-item__subtitle">Пульсометр Polar FT1</div>
<div class="catalog-item__descr">Пульсометр начального уровня с комфортным тканевым ремешком</div>
<a href="#" class="catalog-item__link">ПОДРОБНЕЕ</a>
</div>
<ul class="catalog-item__list ">
<li>Вы услышите звуковое оповещение о нужном пульсе во время тренировки;</li>
<li>Вы увидите информативный графический индикатор целевых тренировочных зон пульса;</li>
<li>Также Вы увидите информацию о расходе калорий за тренировку;</li>
<li>Вы сможете посмотреть данные по 10 тренировкам.</li>
<a href="#" class="catalog-item__back">назад</a>
</ul>
</div>
<hr>
<div class="catalog-item__footer">
<div class="catalog-item__prices">
<div class="catalog-item__old-price">4 750 руб.</div>
<div class="catalog-item__price">4 500 руб.</div>
</div>
<button class="button button_mini">КУПИТЬ</button>
</div>
</div>
<div class="catalog-item">
<div class="catalog-item__wrapper">
<div class="catalog-item__content catalog-item__content_active">
<img src="img/pulsometr.png" alt="pulsometr" class="catalog-item__img">
<div class="catalog-item__subtitle">Пульсометр Polar FT2</div>
<div class="catalog-item__descr">Пульсометр начального уровня с комфортным тканевым ремешком</div>
<a href="#" class="catalog-item__link">ПОДРОБНЕЕ</a>
</div>
<ul class="catalog-item__list ">
<li>Вы услышите звуковое оповещение о нужном пульсе во время тренировки;</li>
<li>Вы увидите информативный графический индикатор целевых тренировочных зон пульса;</li>
<li>Также Вы увидите информацию о расходе калорий за тренировку;</li>
<li>Вы сможете посмотреть данные по 10 тренировкам.</li>
<a href="#" class="catalog-item__back">назад</a>
</ul>
</div>
<hr>
<div class="catalog-item__footer">
<div class="catalog-item__prices">
<div class="catalog-item__old-price">4 750 руб.</div>
<div class="catalog-item__price">4 500 руб.</div>
</div>
<button class="button button_mini">КУПИТЬ</button>
</div>
</div>
<div class="catalog-item">
<div class="catalog-item__wrapper">
<div class="catalog-item__content catalog-item__content_active">
<img src="img/pulsometr.png" alt="pulsometr" class="catalog-item__img">
<div class="catalog-item__subtitle">Пульсометр Polar FT3</div>
<div class="catalog-item__descr">Пульсометр начального уровня с комфортным тканевым ремешком</div>
<a href="#" class="catalog-item__link">ПОДРОБНЕЕ</a>
</div>
<ul class="catalog-item__list ">
<li>Вы услышите звуковое оповещение о нужном пульсе во время тренировки;</li>
<li>Вы увидите информативный графический индикатор целевых тренировочных зон пульса;</li>
<li>Также Вы увидите информацию о расходе калорий за тренировку;</li>
<li>Вы сможете посмотреть данные по 10 тренировкам.</li>
<a href="#" class="catalog-item__back">назад</a>
</ul>
</div>
<hr>
<div class="catalog-item__footer">
<div class="catalog-item__prices">
<div class="catalog-item__old-price">4 750 руб.</div>
<div class="catalog-item__price">4 500 руб.</div>
</div>
<button class="button button_mini">КУПИТЬ</button>
</div>
</div>
<div class="catalog-item">
<div class="catalog-item__wrapper">
<div class="catalog-item__content catalog-item__content_active">
<img src="img/pulsometr.png" alt="pulsometr" class="catalog-item__img">
<div class="catalog-item__subtitle">Пульсометр Polar FT4</div>
<div class="catalog-item__descr">Пульсометр начального уровня с комфортным тканевым ремешком</div>
<a href="#" class="catalog-item__link">ПОДРОБНЕЕ</a>
</div>
<ul class="catalog-item__list ">
<li>Вы услышите звуковое оповещение о нужном пульсе во время тренировки;</li>
<li>Вы увидите информативный графический индикатор целевых тренировочных зон пульса;</li>
<li>Также Вы увидите информацию о расходе калорий за тренировку;</li>
<li>Вы сможете посмотреть данные по 10 тренировкам.</li>
<a href="#" class="catalog-item__back">назад</a>
</ul>
</div>
<hr>
<div class="catalog-item__footer">
<div class="catalog-item__prices">
<div class="catalog-item__old-price">4 750 руб.</div>
<div class="catalog-item__price">4 500 руб.</div>
</div>
<button class="button button_mini">КУПИТЬ</button>
</div>
</div>
<div class="catalog-item">
<div class="catalog-item__wrapper">
<div class="catalog-item__content catalog-item__content_active">
<img src="img/pulsometr.png" alt="pulsometr" class="catalog-item__img">
<div class="catalog-item__subtitle">Пульсометр Polar FT5</div>
<div class="catalog-item__descr">Пульсометр начального уровня с комфортным тканевым ремешком</div>
<a href="#" class="catalog-item__link">ПОДРОБНЕЕ</a>
</div>
<ul class="catalog-item__list ">
<li>Вы услышите звуковое оповещение о нужном пульсе во время тренировки;</li>
<li>Вы увидите информативный графический индикатор целевых тренировочных зон пульса;</li>
<li>Также Вы увидите информацию о расходе калорий за тренировку;</li>
<li>Вы сможете посмотреть данные по 10 тренировкам.</li>
<a href="#" class="catalog-item__back">назад</a>
</ul>
</div>
<hr>
<div class="catalog-item__footer">
<div class="catalog-item__prices">
<div class="catalog-item__old-price">4 750 руб.</div>
<div class="catalog-item__price">4 500 руб.</div>
</div>
<button class="button button_mini">КУПИТЬ</button>
</div>
</div>
<div class="catalog-item">
<div class="catalog-item__wrapper">
<div class="catalog-item__content catalog-item__content_active">
<img src="img/pulsometr.png" alt="pulsometr" class="catalog-item__img">
<div class="catalog-item__subtitle">Пульсометр Polar FT6</div>
<div class="catalog-item__descr">Пульсометр начального уровня с комфортным тканевым ремешком</div>
<a href="#" class="catalog-item__link">ПОДРОБНЕЕ</a>
</div>
<ul class="catalog-item__list ">
<li>Вы услышите звуковое оповещение о нужном пульсе во время тренировки;</li>
<li>Вы увидите информативный графический индикатор целевых тренировочных зон пульса;</li>
<li>Также Вы увидите информацию о расходе калорий за тренировку;</li>
<li>Вы сможете посмотреть данные по 10 тренировкам.</li>
<a href="#" class="catalog-item__back">назад</a>
</ul>
</div>
<hr>
<div class="catalog-item__footer">
<div class="catalog-item__prices">
<div class="catalog-item__old-price">4 750 руб.</div>
<div class="catalog-item__price">4 500 руб.</div>
</div>
<button class="button button_mini">КУПИТЬ</button>
</div>
</div>
</div>
<div class="catalog__content">
<div class="catalog-item">
<div class="catalog-item__wrapper">
<div class="catalog-item__content catalog-item__content_active">
<img src="img/pulsometr.png" alt="pulsometr" class="catalog-item__img">
<div class="catalog-item__subtitle">Пульсометр Polar FT1</div>
<div class="catalog-item__descr">Пульсометр начального уровня с комфортным тканевым ремешком</div>
<a href="#" class="catalog-item__link">ПОДРОБНЕЕ</a>
</div>
<ul class="catalog-item__list">
<li>Вы услышите звуковое оповещение о нужном пульсе во время тренировки;</li>
<li>Вы увидите информативный графический индикатор целевых тренировочных зон пульса;</li>
<li>Также Вы увидите информацию о расходе калорий за тренировку;</li>
<li>Вы сможете посмотреть данные по 10 тренировкам.</li>
<a href="#" class="catalog-item__back">назад</a>
</ul>
</div>
<hr>
<div class="catalog-item__footer">
<div class="catalog-item__prices">
<div class="catalog-item__old-price">4 750 руб.</div>
<div class="catalog-item__price">4 500 руб.</div>
</div>
<button class="button button_mini">КУПИТЬ</button>
</div>
</div>
</div>
<div class="catalog__content">
<div class="catalog-item">
<div class="catalog-item__wrapper">
<div class="catalog-item__content catalog-item__content_active">
<img src="img/pulsometr.png" alt="pulsometr" class="catalog-item__img">
<div class="catalog-item__subtitle">Пульсометр Polar FT1</div>
<div class="catalog-item__descr">Пульсометр начального уровня с комфортным тканевым ремешком</div>
<a href="#" class="catalog-item__link">ПОДРОБНЕЕ</a>
</div>
<ul class="catalog-item__list ">
<li>Вы услышите звуковое оповещение о нужном пульсе во время тренировки;</li>
<li>Вы увидите информативный графический индикатор целевых тренировочных зон пульса;</li>
<li>Также Вы увидите информацию о расходе калорий за тренировку;</li>
<li>Вы сможете посмотреть данные по 10 тренировкам.</li>
<a href="#" class="catalog-item__back">назад</a>
</ul>
</div>
<hr>
<div class="catalog-item__footer">
<div class="catalog-item__prices">
<div class="catalog-item__old-price">4 750 руб.</div>
<div class="catalog-item__price">4 500 руб.</div>
</div>
<button class="button button_mini">КУПИТЬ</button>
</div>
</div>
<div class="catalog-item">
<div class="catalog-item__wrapper">
<div class="catalog-item__content catalog-item__content_active">
<img src="img/pulsometr.png" alt="pulsometr" class="catalog-item__img">
<div class="catalog-item__subtitle">Пульсометр Polar FT1</div>
<div class="catalog-item__descr">Пульсометр начального уровня с комфортным тканевым ремешком</div>
<a href="#" class="catalog-item__link">ПОДРОБНЕЕ</a>
</div>
<ul class="catalog-item__list ">
<li>Вы услышите звуковое оповещение о нужном пульсе во время тренировки;</li>
<li>Вы увидите информативный графический индикатор целевых тренировочных зон пульса;</li>
<li>Также Вы увидите информацию о расходе калорий за тренировку;</li>
<li>Вы сможете посмотреть данные по 10 тренировкам.</li>
<a href="#" class="catalog-item__back">назад</a>
</ul>
</div>
<hr>
<div class="catalog-item__footer">
<div class="catalog-item__prices">
<div class="catalog-item__old-price">4 750 руб.</div>
<div class="catalog-item__price">4 500 руб.</div>
</div>
<button class="button button_mini">КУПИТЬ</button>
</div>
</div>
</div>
</div>
</section>
<section class="reviews">
<div class="container">
<h2 class="title">отзывы клиентов</h2>
<div class="reviews-card">
<img src="img/reviews/irina.jpg" alt="" class="reviews-card__img">
<div class="reviews-card__wrapper">
<div class="reviews-card__name">
Ирина Иванченко
</div>
<div class="reviews-card__marathon">
2 полумарафона
</div>
<div class="reviews-card__descr">
Не знала, что себе купить - обратилась к ребятам из RunSmart - подобрали
пульсометр, который подошёл именно под мои цели и финансовые возможности.
Через некоторое время решила обновить гаджет - не раздумывая обратилась туда же. <br><br>
Новые цели - новый гаджет! <br><br>
Спасибо, RunSmart!
</div>
</div>
</div>
<div class="reviews-card">
<img src="img/reviews/ivan.jpg" alt="" class="reviews-card__img">
<div class="reviews-card__wrapper">
<div class="reviews-card__name">
Иван Сёмочкин
</div>
<div class="reviews-card__marathon">
1 полумарафон
</div>
<div class="reviews-card__descr">
Крутая штука-пульсометр. Обычно без них бегал. Оказывается только хуже себе делал.
Купил пульсометр, ещё в подарок получил тренировку. Со мной вместе провели
первую тренировку, научили пользоваться новым гаджетом. Также объяснили основы
анатомии, составили план тренировок на месяц вперёд.
<br><br>
С ними подготовился к своему первому полумарафону! Спасибо!!!
</div>
</div>
</div>
<div class="reviews-card">
<img src="img/reviews/yulia.jpg" alt="" class="reviews-card__img">
<div class="reviews-card__wrapper">
<div class="reviews-card__name">
Юлия Дашкина
</div>
<div class="reviews-card__marathon">
2 полумарафона
</div>
<div class="reviews-card__descr">
Долго не могла начать бегать, т.к. до этого несколько раз начинала, но становилось
тяжело и я бросала. От друзей услышала о RunSmart и о беге с контролем пульса и
решила попробовать. <br> <br>
Позвонила, ребята поинтересовались моими целями и подобрали очень интересный
вариант со скидкой! Теперь бегаю и наслаждаюсь бегом! Пробежала уже 2
полумарафона и несколько более коротких забегов и не намерена останавливаться! <br><br>
Спасибо!!!
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="footer__map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2244.430481195989!2d37.644807316252155!3d55.76839498055759!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b54a636edcd2ad%3A0x4c2ca101e2c8c617!2z0JzRj9GB0L3QuNGG0LrQuNC5INC_0YAt0LQsIDQvMywg0JzQvtGB0LrQstCwLCAxMDcwNzg!5e0!3m2!1sru!2sru!4v1601365363477!5m2!1sru!2sru"width="100%"height="630" frameborder="0" style="border:0;" allowfullscreen=""aria-hidden="false"tabindex="0"></iframe>
</div>
<div class="footer__info">
<address class="footer__addr">Москва, Мясницкий проезд, д.3с1</address>
<a href="84999228974" class="footer__phone">8 (499) 922-89-74</a>
<div class="footer__social">
<a href="#" class="footer__social-item"><img src="img/social/facebook.png" alt="facebook"></a>
<a href="#" class="footer__social-item"><img src="img/social/instagram.png" alt="instagram"></a>
<a href="#" class="footer__social-item"><img src="img/social/pinterest.png" alt="pinterest"</i></a>
</div>
</div>
</footer>
<div class="overlay">
<div class="modal" id="consultation">
<div class="modal__close">×</div>
<div class="modal__subtitle">Просто заполните форму заявки</div>
<div class="modal__descr">и мы перезвоним вам в течении 10 минут</div>
<form class="feed-form feed-form_mt25" action="#">
<input name="name" placeholder="Ваше имя" type="text">
<input name="phone" placeholder="Ваш телефон">
<input name="email" placeholder="Ваш E-mail" type="email">
<button class="button button_submit">заказать консультацию</button>
</form>
</div>
<div class="modal" id="order">
<div class="modal__close">×</div>
<div class="modal__subtitle">Ваш заказ:</div>
<div class="modal__descr">Пульсометр Polar FT1</div>
<form class="feed-form feed-form_mt25" action="#">
<input name="name" required placeholder="Ваше имя" type="text">
<input name="phone" required placeholder="Ваш телефон">
<input name="email" required placeholder="Ваш E-mail" type="email">
<button class="button button_submit">Купить</button>
</form>
</div>
<div class="modal modal_mini" id="thanks">
<div class="modal__close">×</div>
<div class="modal__subtitle">Спасибо за вашу заявку!</div>
<div class="modal__descr">Наш менеджер свяжется с вами в ближайшее время!</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/jquery.maskedinput.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>$(document).ready(function () {
$('.corousel__inner').slick({
dots: false,
speed: 600,
adaptiveHeight: true,
slidesToShow: 1,
slidesToScroll: 1,
prevArrow: '<button type="button" class="slick-prev"><img src="icons/slide/left.svg"></button>',
nextArrow: '<button type="button" class="slick-next"><img src="icons/slide/right.svg"></button>',
responsive: [
{
breakpoint: 992,
settings: {
dots: true,
arrows: false,
}
}
]
});
$('ul.catalog__tabs').on('click', 'li:not(.catalog__tabs_active)', function () {
$(this)
.addClass('catalog__tab_active').siblings().removeClass('catalog__tab_active')
.closest('div.container').find('div.catalog__content').removeClass('catalog__content_active').eq($(this).index()).addClass('catalog__content_active');
});
function toggleSlide(item) {
$(item).each(function (i) {
$(this).on('click', function(e) {
e.preventDefault();
$('.catalog-item__content').eq(i).toggleClass('catalog-item__content_active');
$('.catalog-item__list').eq(i).toggleClass('catalog-item__list_active');
})
});
};
toggleSlide('.catalog-item__link');
toggleSlide('.catalog-item__back');
$('[data-modal=consultation]').on('click', function() {
$('.overlay, #consultation').fadeIn('slow');
});
$('.modal__close').on('click', function() {
$('.overlay, #consultation, #thanks, #order').fadeOut('slow');
});
$('.button_mini').each(function(i) {
$(this).on('click', function() {
$('#order .modal__descr').text($('.catalog-item__subtitle').eq(i).text());
$('.overlay, #order').fadeIn('slow');
})
});
function validateForms(form) {
$(form).validate({
rules: {
name: {
required: true,
minlength: 2
},
phone: "required",
email: {
required: true,
email: true,
}
},
messages: {
name: {
required: "Пожалуйсто введите своё имя",
minlength: jQuery.validator.format("Веедите {0} символ!")
},
phone: "Пожалуйста введите свой номер телефона",
email: {
required: "Пожалуйсто введите свою почту",
email: "Неправильно введён адрес почты"
}
}
});
};
validateForms('#consultation-form');
validateForms('#consultation form');
validateForms('#order form');
$('input[name=phone]').mask("+7 (999) 999-99-99");
});
