Появляется из не откуда ссылки оборачивая все элементы в модальном окне

Рейтинг: -1Ответов: 2Опубликовано: 29.07.2023

Появляются 2 неизвестные ссылки из не откуда

Причем даже когда я отвязываю JS и CSS то все равно эти зловополучные ссылки остаются

введите сюда описание изображения

Вот код:

$(document).ready(function(){
    $(".owl-carousel").owlCarousel();
  });

  $(".partners-slider").owlCarousel({
    items:5,
    margin: 119,
    loop: true,
    nav:false,
    dots:false,
    responsive:{
      320:{
        items:2,
        margin:0
      },
      520:{
          items:3,
          margin:0
      },
      768:{
          items:4,
          margin:0
      },
      1099:{
          items:5
          
      }
  }
  }
  );

  $(".advantages-slider").owlCarousel({
    items:5,
    margin: 119,
    loop: true,
    nav:false,
    dots:false,
    responsive:{
      320:{
        items:2,
        margin:0
      },
      520:{
          items:3,
          margin:0
      },
      768:{
          items:4,
          margin:0
      },
      1099:{
          items:5
          
      }
  }
  }
  );

  $(".header-burger").click(function () {
    $(".burger-menu").addClass("active")
    $(".dark").fadeIn(600)
  })
  
  $(".dark").click(function () {
    $(".burger-menu").removeClass("active")
    $(".dark").fadeOut(600)
  })
  $(".header-burger").click(function () {
    $(".burger-menu").addClass("active")
    $(".dark").fadeIn(600)
  })
  
  $(".header-burger").click(function () {
    $(".burger-menu").addClass("active")
    $(".dark").fadeIn(600)
  })  
  
  $(".dark").click(function () {
    $(".burger-menu").removeClass("active")
    $(".dark").fadeOut(600)
  })
  $(".closeburger").click(function () {
    $(".burger-menu").removeClass("active")
    $(".dark").fadeOut(600)
  })
  
  !function(e){"function"!=typeof e.matches&&(e.matches=e.msMatchesSelector||e.mozMatchesSelector||e.webkitMatchesSelector||function(e){for(var t=this,o=(t.document||t.ownerDocument).querySelectorAll(e),n=0;o[n]&&o[n]!==t;)++n;return Boolean(o[n])}),"function"!=typeof e.closest&&(e.closest=function(e){for(var t=this;t&&1===t.nodeType;){if(t.matches(e))return t;t=t.parentNode}return null})}(window.Element.prototype);


  document.addEventListener('DOMContentLoaded', function() {
  
     /* Записываем в переменные массив элементов-кнопок и подложку.
        Подложке зададим id, чтобы не влиять на другие элементы с классом overlay*/
     var modalButtons = document.querySelectorAll('.js-open-modal'),
         overlay      = document.querySelector('.js-overlay-modal'),
         closeButtons = document.querySelectorAll('.js-modal-close');
  
  
     /* Перебираем массив кнопок */
     modalButtons.forEach(function(item){
  
        /* Назначаем каждой кнопке обработчик клика */
        item.addEventListener('click', function(e) {
  
           /* Предотвращаем стандартное действие элемента. Так как кнопку разные
              люди могут сделать по-разному. Кто-то сделает ссылку, кто-то кнопку.
              Нужно подстраховаться. */
           e.preventDefault();
  
           /* При каждом клике на кнопку мы будем забирать содержимое атрибута data-modal
              и будем искать модальное окно с таким же атрибутом. */
           var modalId = this.getAttribute('data-modal'),
               modalElem = document.querySelector('.modal[data-modal="' + modalId + '"]');
  
  
           /* После того как нашли нужное модальное окно, добавим классы
              подложке и окну чтобы показать их. */
           modalElem.classList.add('active');
           overlay.classList.add('active');
        }); // end click
  
     }); // end foreach
  
  
     closeButtons.forEach(function(item){
  
        item.addEventListener('click', function(e) {
           var parentModal = this.closest('.modal');
  
           parentModal.classList.remove('active');
           overlay.classList.remove('active');
        });
  
     }); // end foreach
  
  
      document.body.addEventListener('keyup', function (e) {
          var key = e.keyCode;
  
          if (key == 27) {
  
              document.querySelector('.modal.active').classList.remove('active');
              document.querySelector('.overlay').classList.remove('active');
          };
      }, false);
  
  
      overlay.addEventListener('click', function() {
          document.querySelector('.modal.active').classList.remove('active');
          this.classList.remove('active');
      });
  
  
  
  
  }); // end ready
.overlay {
   
  /* Скрываем подложку  */
  opacity: 0;
  visibility: hidden;
  
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  z-index: 20;
  transition: .3s all;
}


/* Стили для модальных окон */

.modal {
  
  /* Скрываем окна  */
  opacity: 0;
  visibility: hidden;
  
  
  /*  Установаем ширину окна  */
  
  /*  Центрируем и задаем z-index */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30; /* Должен быть выше чем у подложки*/
}
*
/* Стили для активных классов подложки и окна */

.modal.active,
.overlay.active{
  opacity: 1;
  visibility: visible;
}

.modal{
  background: #FFFFFF;
  box-shadow: 0px 4px 100px rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  width: 668px;
  min-height: 356px;
}
/* Стили для кнопки закрытия */

.modal__cross {
  width: 15px;
  height: 15px;
  position: absolute;
  top: 12px;
  right: 10px;
  fill: #444;
  cursor: pointer;
}

/* Контент модалки */

  .modal-image{
    background: linear-gradient(139deg, rgba(33, 49, 69, 0.80) 0%, rgba(26, 35, 46, 0.80) 100%), #0B8FCB;
    backdrop-filter: blur(9.5px);
    width: 217px;
    height: 356px;
    position: relative;
  }
  .modal-image-shadow{
    background:#094794;
    mix-blend-mode: hue;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
  }
  .btn-thank-modal{
    border-radius: 60px;
    border: 1px solid #0A62A9;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 225px;
    height: 40px;
    color: #0B0F14;
    font-family: Atyp Display;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 14px */
  }
  .modal-text p{
    width: 315px;
    color: #0B0F14;
    font-family: Atyp Display;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 19.2px */
    opacity: 0.5;
    margin-bottom: 50px;
  }
  .modal-text h2{
    width: 259px;
    color: #0B0F14;
    font-family: Atyp Display;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%; /* 33px */
    text-transform: uppercase;
    margin-bottom: 20px;
  }
  .modal-text svg{
    margin-bottom: 30px;
  }
  .modal-text{
    padding-right: 88px;
    position: relative;
    bottom: 10px;
  }
  .modal1-content{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
    <div class="modal" data-modal="1">
        <div class="modal1-content">
            <div class="modal-image">
                <img src="static/images/modalimage.png" alt="">
                <div class="modal-image-shadow"></div>  
                </div>
                <div class="modal-text">
                        <svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="21" cy="21" r="21" fill="#0B8FCB"/>
                            <path d="M27.25 16L18.5 26L14.75 22.25" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            
                            <h2>Спасибо что выбираете нас!</h2>
                            <p>Мы перезвоним вам в течении 5 минут и ответим на все ваши вопросы</p>
                        <a href="#" class="btn-thank-modal">Отправить ещё заявку</a>               
                </div>
        </div>
 </div>
 <div class="overlay js-overlay-modal"></div>

Ответы

▲ 0Принят

Проверь, не подключаются ли где-то в коде сторонние библиотеки типа jQuery, Bootstrap и т.д. Они могут тянуть за собой дополнительные скрипты. Посмотри в консоли, откуда именно появляются эти скрипты. Может быть это какая-то рекламная сеть или виджеты соцсетей.

▲ 0

Всем спасибо за ответы! Проблема была в том , что просто была не закрыта одна ссылка и поэтому оно как то распостранялось на другие блоки.