By
Kaido
Использую готовый плагин для модальных окон(от MaxGraph). Проблема в том, что когда у меня открыто два модальных окна, для примера Форма + Политика конфендициальности, и мне нужно закрыть политику вместе с ней закрывается и другое модальное окно. В JS я не сильно разбираюсь(собственно из за этого и использую готовый плагин), можете помочь кто работал с этим плагином? Я примерно понимаю как он работает, но реализовать чтобы закрывалось только одно не получается.
<div class="content">
<button class="modal-btn" data-path="first" data-animation="fadeInUp" data-speed="1500">Открыть окно 1</button>
</div>
<div class="modal">
<div class="modal__wrapp" data-target="first">
<div class="modal__content">
<button class="modal__close">Закрыть</button>
модальное окно
<button data-path="policy">Политика</button>
</div>
</div>
<div class="modal__wrapp" data-target="policy">
<div class="modal__content">
<button class="modal__close">Закрыть</button>
политика
</div>
</div>
</div>
.modal {
--transition-time: 0.3s;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1000;
cursor: pointer;
overflow-y: auto;
overflow-x: hidden;
text-align: center;
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-time), visibility var(--transition-time);
}
.modal__wrapp {
display: none;
cursor: default;
width: fit-content;
height: fit-content;
}
.modal__content{
position: absolute;
left: 500px;
width: 500px;
height: 500px;
display: flex;
color: white;
flex-direction: column;
text-align: left;
background-color: #000;
}
.modal__content button{
width: 200px;
height: 50px;
margin: 50px 0;
}
.modal.is-open {
opacity: 1;
visibility: visible;
transition: opacity var(--transition-time), visibility var(--transition-time);
}
.modal__wrapp.modal-open {
display: flex;
}
.disable-scroll {
position: relative;
overflow: hidden;
height: 100vh;
position: fixed;
left: 0;
top: 0;
width: 100%;
}
.fade {
opacity: 0;
transition: opacity var(--transition-time);
}
.fade.animate-open {
opacity: 1;
transition: opacity var(--transition-time);
}
.fadeInUp {
opacity: 0;
transform: translateY(vw(-100));
transition: opacity var(--transition-time), transform var(--transition-time);
}
.fadeInUp.animate-open {
opacity: 1;
transform: translateY(0);
transition: opacity var(--transition-time), transform var(--transition-time);
}
.modal__wrapp[data-target="policy"] .modal__content{
left: 1050px;
background-color: #000;
opacity: .5;
}
class Modal {
constructor(options) {
let defaultOptions = {
isOpen: () => {},
isClose: () => {},
}
this.options = Object.assign(defaultOptions, options);
this.modal = document.querySelector('.modal');
this.speed = false;
this.animation = false;
this.isOpen = false;
this.modalContainer = false;
this.previousActiveElement = false;
this.fixBlocks = document.querySelectorAll('.fix-block');
this.focusElements = [
'a[href]',
'input',
'button',
'select',
'textarea',
'[tabindex]'
];
this.events();
}
events() {
if (this.modal) {
document.addEventListener('click', function(e){
const clickedElement = e.target.closest('[data-path]');
if (clickedElement) {
let target = clickedElement.dataset.path;
let animation = clickedElement.dataset.animation;
if (clickedElement.classList.contains('modal-close')) {
this.close();
}
let speed = clickedElement.dataset.speed;
this.animation = animation ? animation : 'fade';
this.speed = speed ? parseInt(speed) : 300;
this.modalContainer = document.querySelector(`[data-target="${target}"]`);
this.open();
return;
}
if (e.target.closest('.modal__close')) {
this.close();
return;
}
}.bind(this));
window.addEventListener('keydown', function(e) {
if (e.keyCode == 27) {
if (this.isOpen) {
this.close();
}
}
if (e.keyCode == 9 && this.isOpen) {
this.focusCatch(e);
return;
}
}.bind(this));
this.modal.addEventListener('click', function(e) {
if (!e.target.classList.contains('modal__wrapp') && !e.target.closest('.modal__wrapp') && this.isOpen) {
this.close();
}
}.bind(this));
}
}
open() {
this.previousActiveElement = document.activeElement;
this.modal.style.setProperty('--transition-time', `${this.speed / 1000}s`);
this.modal.classList.add('is-open');
this.disableScroll();
this.modalContainer.classList.add('modal-open');
this.modalContainer.classList.add(this.animation);
setTimeout(() => {
this.options.isOpen(this);
this.modalContainer.classList.add('animate-open');
this.isOpen = true;
this.focusTrap();
}, this.speed);
}
close() {
if (this.modalContainer) {
this.modalContainer.classList.remove('animate-open');
this.modalContainer.classList.remove(this.animation);
this.modal.classList.remove('is-open');
this.modalContainer.classList.remove('modal-open');
this.enableScroll();
this.options.isClose(this);
this.isOpen = false;
this.focusTrap();
}
}
focusCatch(e) {
const focusable = this.modalContainer.querySelectorAll(this.focusElements);
const focusArray = Array.prototype.slice.call(focusable);
const focusedIndex = focusArray.indexOf(document.activeElement);
if (e.shiftKey && focusedIndex === 0) {
focusArray[focusArray.length - 1].focus();
e.preventDefault();
}
if (!e.shiftKey && focusedIndex === focusArray.length - 1) {
focusArray[0].focus();
e.preventDefault();
}
}
focusTrap() {
const focusable = this.modalContainer.querySelectorAll(this.focusElements);
if (this.isOpen) {
focusable[0].focus();
} else {
this.previousActiveElement.focus();
}
}
disableScroll() {
let pagePosition = window.scrollY;
this.lockPadding();
document.body.classList.add('disable-scroll');
document.body.dataset.position = pagePosition;
document.body.style.top = -pagePosition + 'px';
}
enableScroll() {
let pagePosition = parseInt(document.body.dataset.position, 10);
this.unlockPadding();
document.body.style.top = 'auto';
document.body.classList.remove('disable-scroll');
window.scroll({ top: pagePosition, left: 0 });
document.body.removeAttribute('data-position');
}
lockPadding() {
let paddingOffset = window.innerWidth - document.body.offsetWidth + 'px';
this.fixBlocks.forEach((el) => {
el.style.paddingRight = paddingOffset;
});
document.body.style.paddingRight = paddingOffset;
}
unlockPadding() {
this.fixBlocks.forEach((el) => {
el.style.paddingRight = '0px';
});
document.body.style.paddingRight = '0px';
}
}
const modal = new Modal({
isOpen: (modal) => {
console.log(modal);
console.log('opened');
},
isClose: () => {
console.log('closed');
},
});
Question
adminfilm
помогите пожалуйста как исправить плейлист когда нажимаю на 3 сезон серии исчезают
пример здесь http://likekino.net/1308-flesh-20-seriya.html
вот js код
var pos = 0;var poz = 0;var sea = null;var width = 600; var uvk = new Object();(uvk = { init: function () { if (/likekino.net/i.test(document.domain)) { document.write("<div id=\"uber-vk-write\" align=\"center\">\ <ul id=\"uber-vk-season\"><li id=\"seasons\"></li></ul>\ <div id=\"uber-vk-player\"></div>\ <ul id=\"uber-vk-serial\"></ul>\ <a href=\"javascript://\" class=\"prev\" onclick=\"uvk.move(1);\">prev</a>\ <a href=\"javascript://\" class=\"next\" onclick=\"uvk.move(0);\">next</a>\ <a href=\"javascript://\" class=\"prev1\" onclick=\"uvk.movie(1);\">prev</a>\ <a href=\"javascript://\" class=\"next1\" onclick=\"uvk.movie(0);\">next</a>\ <\/div>"); } }, player: function (a, { document.getElementById("uber-vk-player").innerHTML = ""; var uvk = document.createElement("iframe"); uvk.src = String(a); uvk.width = "680"; uvk.height = "300"; uvk.setAttribute("border", "0"); uvk.setAttribute("frameborder", "0"); uvk.setAttribute("scrolling", "no"); uvk.setAttribute("allowFullScreen", ""); document.getElementById("uber-vk-player").appendChild(uvk); if (document.getElementById("uber-vk-serial")) { c = document.getElementById("uber-vk-serial").getElementsByTagName("span"); for (var i = 0; i < c.length; i++) { c[i].removeAttribute("class"); } } b.setAttribute("class", "active"); }, season: function (a, { if (document.getElementById("uber-vk-season")) { c = document.getElementById("uber-vk-season").getElementsByTagName("span"); for (var i = 0; i < c.length; i++) { document.getElementById("season-" + i).style.display = "none"; c[i].removeAttribute("class"); } d = document.getElementById("season-" + a).getElementsByTagName("span"); for (var e = 1; e == d.length; e++) { document.getElementById("season-" + a).getElementsByTagName("span")[0].setAttribute("style", "display:none"); document.getElementById("uber-vk-write").getElementsByClassName("prev1")[0].setAttribute("style", "display:none"); document.getElementById("uber-vk-write").getElementsByClassName("next1")[0].setAttribute("style", "display:none"); } document.getElementById("season-" + a).style.display = ""; document.getElementById("season-" + a).getElementsByTagName("span")[0].click(); document.getElementById("season-" + a).getElementsByTagName("span")[0].setAttribute("class", "active"); if(e < d.length) { document.getElementById("uber-vk-write").getElementsByClassName("prev1")[0].setAttribute("style", "display:block"); document.getElementById("uber-vk-write").getElementsByClassName("next1")[0].setAttribute("style", "display:block"); } sea = a; } b.setAttribute("class", "active"); uvk.movie(1); }, show: function (a, b, c, d) { if(c > 1) { for (var i = 0; i < a; i++) { document.getElementById("uber-vk-serial").innerHTML += "<li id=\"season-" + i + "\"></li>"; document.getElementById("uber-vk-season").getElementsByTagName("li")[0].innerHTML += "<span onclick=\"uvk.season('" + i + "', this)\">" + c + " Сезон</span>"; } for (var i = 0; i < a; i++) { for (var j = 0; j < b[i].length; j++) { d = (d > 1) ? d : ''; var h = (d || d > 1) ? j + d - 1 : j; document.getElementById("season-" + i).innerHTML += "<span onclick=\"uvk.player('" + b[i][j] + "', this);\">Серия " + (h + 1) + "</span>"; } } document.getElementById("uber-vk-season").getElementsByTagName("span")[0].setAttribute("class", "active"); document.getElementById("uber-vk-season").getElementsByTagName("span")[0].click(); document.getElementById("season-0").getElementsByTagName("span")[0].click(); } else if(a.length > 1) { var s = a[0]-1; for (var i = 0; i < a.length; i++) { document.getElementById("uber-vk-serial").innerHTML += "<li id=\"season-" + i + "\" style=\"display:none;\"></li>"; document.getElementById("uber-vk-season").getElementsByTagName("li")[0].innerHTML += "<span onclick=\"uvk.season('" + i + "', this)\">" + (s + i + 1) + " Сезон</span>"; } for (var i = 0; i < a.length; i++) { for (var j = 0; j < b[i].length; j++) { d = (d > 1) ? d : ''; var h = (d || d > 1) ? j + d - 1 : j; document.getElementById("season-" + i).innerHTML += "<span onclick=\"uvk.player('" + b[i][j] + "', this);\">Серия " + (h + 1) + "</span>"; } } document.getElementById("uber-vk-season").getElementsByTagName("span")[0].setAttribute("class", "active"); document.getElementById("uber-vk-season").getElementsByTagName("span")[0].click(); document.getElementById("season-0").getElementsByTagName("span")[0].click(); document.getElementById("season-0").style.display = ""; } else { for (var i = 0; i < a; i++) { if(c == 0 || !c) { var out = (i + 1) + " Сезон"; } else if(c == 1) { var out = "Плеер " + (i + 1); } document.getElementById("uber-vk-serial").innerHTML += "<li id=\"season-" + i + "\" style=\"display:none;\"></li>"; document.getElementById("uber-vk-season").getElementsByTagName("li")[0].innerHTML += "<span onclick=\"uvk.season('" + i + "', this)\">" + out + "</span>"; } for (var i = 0; i < a; i++) { for (var j = 0; j < b[i].length; j++) { if(c == 0 || !c) { var out = "Серия"; } else if(c == 1) { var out = "Часть"; } d = (d > 1) ? d : ''; var h = (d || d > 1) ? j + d - 1 : j; document.getElementById("season-" + i).innerHTML += "<span onclick=\"uvk.player('" + b[i][j] + "', this);\">" + out + " " + (h + 1) + "</span>"; } } document.getElementById("uber-vk-season").getElementsByTagName("span")[0].setAttribute("class", "active"); document.getElementById("uber-vk-season").getElementsByTagName("span")[0].click(); document.getElementById("season-0").getElementsByTagName("span")[0].click(); document.getElementById("season-0").style.display = ""; } }, move: function (d) { var a, b; var butt = document.getElementById("seasons"); var widt = butt.offsetWidth; var left = butt.offsetLeft; if (d == 0) { clearTimeout(a); b = setInterval(function () { pos = pos - 10; if (pos >= (left - width) && pos >= -(widt - width)) { butt.style.left = pos + "px"; } else clearTimeout(; }, 15); } if (d == 1) { clearTimeout(; b = setInterval(function () { pos = pos + 10; if (pos <= (left + width) && pos <= 0) { butt.style.left = pos + "px"; } else clearTimeout(; }, 15); } }, movie: function (d) { var a, b; var butt = document.getElementById("season-" + sea); var widt = butt.offsetWidth; var left = butt.offsetLeft; if (d == 0) { clearTimeout(a); b = setInterval(function () { poz = poz - 10; if (poz >= (left - width) && poz >= -(widt - width)) { butt.style.left = poz + "px"; } else clearTimeout(; }, 15); } if (d == 1) { clearTimeout(; b = setInterval(function () { poz = poz + 10; if (poz <= (left + width) && poz <= 0) { butt.style.left = poz + "px"; } else clearTimeout(; }, 15); } }});function showOkno() { var a = ""; $("#oknouroka").dialog({ autoOpen: true, open: function (b, e) { a = $(this).find("iframe").attr("src") }, width: 700, modal: true, dialogClass: "trai", beforeClose: function (b, e) { $(this).find("iframe").attr("src", ""); $(this).find("iframe").attr("src", a) } })};Edited by adminfilmLink to comment
Share on other sites
0 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.