javascript iziModalЗаготовка

Posted 2021-05-04

.iziModal .close {
   position: absolute;
   top: 10px;
   right: 10px;
   cursor: pointer;
}

.iziModal .close svg {
   transform: rotate(45deg);
   fill: #666;
}

.iziModal-content{
   box-sizing: border-box;
}


.iziModal .title{
   text-align: center;
   color: #424041;
   font-size: 26px;
   text-transform: uppercase;
   line-height: 1.2;
   margin-bottom: 20px;
}

<div class="modals">
      
      <div id="back" class="iziModal">
         <div class="close">
            <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
               <path d="M0 0h24v24H0z" fill="none"/>
               <path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
            </svg>
         </div>
         <div class="content">
           <div class="title">Обратный звонок</div>
           
            <form class="send">

               <!-- Hidden Required Fields -->
               <input type="hidden" name="project_name" value="<php echo $form_name; ?>">
               <input type="hidden" name="admin_email" value="<php echo $form_email; ?>">
               <input type="hidden" name="form_subject" value="<php echo $form_subject; ?>">
               <!-- END Hidden Required Fields -->

               <div class="input-field">
                  <label for="first_name" class="">Имя</label>
                  <input id="name" name="Имя" type="text" class="validate required" placeholder="Ваше имя">
               </div>
               <div class="input-field">
                  <label for="first_name">Телефон</label>
                  <input id="tel" name="Телефон" type="text" class="phone validate required" placeholder="Ваш телефон">
               </div>
               <div class="policy">Оправляя заявку, вы соглашаетесь <br>с <a href="#" class="policy-form">политикой конфиденциальности</a></div>
               <button class="btn">Отправить</button>
            </form>
         </div>
      </div>
      

      <div id="policy-modal" class="iziModal">
         <div class="close">
            <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
               <path d="M0 0h24v24H0z" fill="none"/>
               <path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
            </svg>
         </div>
         <div class="content">
            <!--noindex-->
            <h1>Политика конфиденциальности</h1>

            <h2>1. ОСНОВНЫЕ ПОНЯТИЯ</h2>
            <p>Сайт – корпоративный сайт компании, расположенный в сети Интернет по адресу: www.tat-lstk.ru</p>
            <p>Администрация Сайта – [phone].</p>
            <p>Пользователь – физическое или юридическое лицо, разместившее свою персональную информацию посредством Формы обратной связи на сайте с последующей целью передачи данных  Администрации Сайта.</p>
            <p>Форма обратной связи – специальная форма, где Пользователь размещает свою персональную информацию с целью передачи данных Администрации Сайта.</p>

            <h2>2. ОБЩИЕ ПОЛОЖЕНИЯ</h2>
            <p>2.1. Настоящая Политика конфиденциальности является официальным типовым документом Администрации Сайта и определяет порядок обработки и защиты информации о физических и юридических лицах, использующих Форму обратной связи на Сайте.</p>
            <p>2.2. Целью настоящей Политики конфиденциальности является обеспечение надлежащей защиты информации о Пользователе, в т.ч. его персональных данных от несанкционированного доступа и разглашения.</p>
            <p>2.3. Отношения, связанные со сбором, хранением, распространением и защитой информации о пользователях регулируются настоящей Политикой конфиденциальности и действующим законодательством Российской Федерации.</p>
            <p>2.4. Действующая редакция Политики конфиденциальности, является публичным документом, разработана Администрацией Сайта и доступна любому Пользователю сети Интернет при переходе по гипертекстовой ссылке «Политика конфиденциальности».</p>
            <p>2.5. Администрация Сайта вправе вносить изменения в настоящую Политику конфиденциальности.</p>
            <p>2.6. При внесении изменений в Политику конфиденциальности, Администрация Сайта уведомляет об этом Пользователя путём размещения новой редакции Политики конфиденциальности на Сайте www.tat-lstk.ru</p> 
            <p>2.7. При размещении новой редакции Политики конфиденциальности на Сайте, предыдущая редакция хранятся в архиве документации Администрации Сайта.</p>
            <p>2.8. Используя Форму обратной связи, Пользователь выражает свое согласие с условиями настоящей Политики конфиденциальности.</p>
            <p>2.9. Администрация Сайта не проверяет достоверность получаемой (собираемой) информации о Пользователе.</p>

            <h2>3. УСЛОВИЯ И ЦЕЛИ СБОРА И ОБРАБОТКИ ПЕРСОНАЛЬНЫХ ДАННЫХ ПОЛЬЗОВАТЕЛЕЙ</h2>
            <p>3.1. Персональные данные Пользователя такие как: имя, e-mail, телефон, и др., передаются Пользователем  Администрации Сайта с согласия Пользователя.  </p>
            <p>3.2. Передача персональных данных Пользователем Администрации Сайта, через Форму обратной связи  означает согласие Пользователя на передачу его персональных данных.</p>
            <p>3.3. Администрация Сайта осуществляет обработку информации о Пользователе, в т.ч. его персональных данных, таких как: имя, e-mail, телефон и др., а также дополнительной информации о Пользователе, предоставляемой им по своему желанию: организация, город, должность и др. в целях выполнения обязательств перед Пользователем Сайта.</p>
            <p>3.4. Обработка персональных данных осуществляется на основе принципов: <br>
               а) законности целей и способов обработки персональных данных и добросовестности; <br>
               б) соответствия целей обработки персональных данных целям, заранее определенным и заявленным при сборе персональных данных; <br>
               в) соответствия объёма и характера обрабатываемых персональных данных способам обработки персональных данных и целям обработки персональных данных; <br>
               г) недопустимости объединения созданных для несовместимых между собой целей баз данных, содержащих персональные данные.</p>
            <p>3.5. Администрация Сайта осуществляет обработку персональных данных Пользователя с его согласия в целях оказания услуг/продажи товаров, предлагаемых на Сайте.</p>

            <h2>4. ХРАНЕНИЕ И ИСПОЛЬЗОВАНИЕ ПЕРСОНАЛЬНЫХ ДАННЫХ</h2>
            <p>Персональные данные Пользователя хранятся исключительно на электронных носителях и используются строго по назначению, оговоренному в п.3 настоящей Политики конфиденциальности.</p>

            <h2>5. ПЕРЕДАЧА ПЕРСОНАЛЬНЫХ ДАННЫХ</h2>
            <p>5.1. Персональные данные Пользователя не передаются каким-либо третьим лицам, за исключением случаев, прямо предусмотренных настоящей Политикой конфиденциальности, указанных в Согласии с рассылкой.</p>

            <p>5.2. Предоставление персональных данных Пользователя по запросу государственных органов, органов местного самоуправления осуществляется в порядке, предусмотренном законодательством Российской Федерации.</p>

            <h2>6. СРОКИ ХРАНЕНИЯ И УНИЧТОЖЕНИЕ ПЕРСОНАЛЬНЫХ ДАННЫХ</h2>
            <p>6.1. Персональные данные Пользователя хранятся на электронном носителе сайта бессрочно.</p>
            <p>6.2. Персональные данные Пользователя уничтожаются при желании самого пользователя на основании его обращения, либо по инициативе Администратора сайта без объяснения причин путём удаления Администрацией Сайта информации, размещённой Пользователем.</p>

            <h2>7. ПРАВА И ОБЯЗАННОСТИ ПОЛЬЗОВАТЕЛЕЙ</h2>
            <p>Пользователи вправе на основании запроса получать от Администрации Сайта информацию, касающуюся обработки его персональных данных.</p>

            <h2>8. МЕРЫ ПО ЗАЩИТЕ ИНФОРМАЦИИ О ПОЛЬЗОВАТЕЛЯХ</h2>
            <p>Администратор Сайта принимает технические и организационно-правовые меры в целях обеспечения защиты персональных данных Пользователя от неправомерного или случайного доступа к ним, уничтожения, изменения, блокирования, копирования, распространения, а также от иных неправомерных действий.</p>

            <h2>9. ОБРАЩЕНИЯ ПОЛЬЗОВАТЕЛЕЙ</h2>
            <p>9.1. Пользователь вправе направлять Администрации Сайта свои запросы, в т.ч. относительно использования/удаления его персональных данных, предусмотренные п.3 настоящей Политики конфиденциальности в письменной форме по адресу, указанному в п.1.</p>
            <p>9.2. Запрос, направляемый Пользователем, должен содержать следующую информацию:</p>
            <p>для физического лица:<br>
               – номер основного документа, удостоверяющего личность Пользователя или его представителя;<br>
               – сведения о дате выдачи указанного документа и выдавшем его органе;<br>
               – дату регистрации через Форму обратной связи;<br>
               – текст запроса в свободной форме;<br>
               – подпись Пользователя или его представителя.</p>
            <p>для юридического лица:<br>
               – запрос в свободной форме на фирменном бланке;<br>
               – дата регистрации через Форму обратной связи;<br>
               – запрос должен быть подписан уполномоченным лицом с приложением документов, подтверждающих полномочия лица.</p>
            <p>9.3. Администрация Сайта обязуется рассмотреть и направить ответ на поступивший запрос Пользователя в течение 30 дней с момента поступления обращения.</p>
            <p>9.4. Вся корреспонденция, полученная Администрацией от Пользователя (обращения в письменной/электронной форме) относится к информации ограниченного доступа и без письменного согласия Пользователя разглашению не подлежит. Персональные данные и иная информация о Пользователе, направившем запрос, не могут быть без специального согласия Пользователя использованы иначе, как для ответа по теме полученного запроса или в случаях, прямо предусмотренных законодательством.</p>
            <!--/noindex-->
         </div>
      </div>


      <div id="thenks-modal" class="iziModal forms">
         <div class="close">
            <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
               <path d="M0 0h24v24H0z" fill="none"/>
               <path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
            </svg>
         </div>
         <div class="content">
            <div class="box1 box1--modal">
               <div class="title">Заявка отправлена</div>
               <div class="text">Спасибо за доверие! Мы свяжемся с Вами в ближайшее время</div>
            </div>
         </div>
      </div>

   </div>
   

$(".iziModal").iziModal({
        width: 400,
        radius: 2,
        padding: 35,
        overlayColor: 'rgba(0, 0, 0, 0.7)',
        onClosed: function(){
            history.pushState('', document.title, window.location.pathname); //удаляем хэш при закрытии
        }
    });
    $('.close').click(function(e){
        $(this).parents('.iziModal').iziModal('close');
    });
   
   $('.back-call').on('click', function (e){
      e.preventDefault();
      $('#back').iziModal('open');
      $(".phone").mask("[phone]");
   });
   
   
    $('.policy-link').on('click', function (e){
        e.preventDefault();
        $('#policy-modal').iziModal('open');
    });