Как одним кликом по ссылке внутри модального окна закрыть текущее окно и открыть новое?

D
На сайте с 01.09.2015
Offline
56
264

Приветствую. Кто знает, подскажите как нажав на ссылку внутри модального окна закрыть текущее окно и запустить открытие нового окна на этой же странице?


let timer = null;
let slider = document.querySelector('#slider'),
slides = slider.querySelectorAll('.slide_item'),
len = slides.length,
index = len - 1,
dir = 1;

function move() {
slides[index].style.opacity = "";
slides[index].style.zIndex = "";
index = (index + dir + len) % len;
slides[index].style.opacity = 1;
slides[index].style.zIndex = 1;
var article = slides[index].getElementsByTagName('article')[0];
document.getElementById('window').style.width = article.offsetWidth+'px';
document.getElementById('window').style.height = article.offsetHeight+'px';
index < len - 1 && (timer = window.setTimeout(move, 2000));
}

function show(state) {
if (state === "block") {
timer = window.setTimeout(move, 0);
} else {
clearTimeout(timer);
}
document.getElementById('window').style.display = state;
document.getElementById('wrap').style.display = state;

getProgress();

}


<button onclick="show('block')">Вперед</button>

<div id="wrap"></div>

<!-- ОКНО НОМЕР 1-->
<div id="window">
<div id="slider">
<div class="slide_item">
<article>

Окно №1. Контент 1

</article>
</div>

<div class="slide_item">
<article>

Окно №1. Контент 2
<br><br>

<button onclick="show('block')">Открыть окно номер 2</button>

</article>
</div>
</div>
</div>

<!-- ОКНО НОМЕР 2-->
<div id="window">
<div id="slider">
<div class="slide_item">
<article>

Окно №2. Контент 3

</article>
</div>
<div class="slide_item">
<article>

Окно №2. Контент 4

</article>
</div>
</div>
</div>


#slider{
width: 100%;
height: 80vh;
margin: 0px auto;
position: relative;
overflow: hidden;
}

.slide_item{
width: 100%;
height: 100%;
position: absolute;
font-family:Arial;
font-size:18px;
color:#000000;
left: 0;
top:0;
float: left;
opacity: 0;
z-index: -10;
background-size: cover;
}

#wrap{
display: none;
opacity: 0.5;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 1);
z-index: 100;
overflow: auto;
}

#window{
width: 900px;
height: 600px;
margin: auto;
display: none;
background: #fff;
border: 1px solid #365E97;
z-index: 200;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
vertical-align:middle;
-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);
box-shadow:0 5px 15px rgba(0,0,0,.5);
}

article {
width: 100%;
height: 200px;
}
HR
На сайте с 18.02.2020
Offline
0
#1

Здравствуйте.

Можете попробовать готовое решение (если такой вариант подходит) в виде модального окна ArcticModal https://arcticlab.ru/arcticmodal/ , там подключение простое и стилизация свободная.

Грубо говоря вам нужно будет :

1. Подключить всплывание нужного блока как модальное вот так : $('#модальное_окно1').arcticmodal(); (либо если нужно по клику, то тоже самое, только обернуть в обработчик клика по нужному элементу)

2. При клике на нужный вам элемент , закрывать прошлое окно, и открывать новое можно вот так :

$('.нужныйблок').on('click', function(){
$('#модальное_окно1').arcticmodal('close'); //Закрытие предыдущего
$('#модальное_окно2').arcticmodal(); //Открытие второго
});

Надеюсь такой вариант будет вам полезен ;)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий