Появляется из не откуда ссылки оборачивая все элементы в модальном окне
Появляются 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>
Источник: Stack Overflow на русском