Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.02.2020, 19:26
Кандидат Javascript-наук
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 124

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

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;
}

Последний раз редактировалось Lefseq, 17.02.2020 в 20:14.
Ответить с цитированием
  #2 (permalink)  
Старый 17.02.2020, 19:46
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,723

О каких "модальных окнах" вообще речь?
Нужно больше конкретики и желательно привести пример кода.
Ответить с цитированием
  #3 (permalink)  
Старый 17.02.2020, 20:15
Кандидат Javascript-наук
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 124

Сообщение от Nexus Посмотреть сообщение
О каких "модальных окнах" вообще речь?
Нужно больше конкретики и желательно привести пример кода.
Добавил код
Ответить с цитированием
  #4 (permalink)  
Старый 18.02.2020, 14:26
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,723

ID должен быть уникальным.
Не могу понять логику вашего кода.

Набросал свой пример кода:
<button type="button" data-open-popup="popup-1">Вперед</button>

<div class="popup" id="popup-1">
    <div class="popup__content">
        Popup #1
        <button type="button" 
                data-close-popup="popup-1"
                data-open-popup="popup-2">Вперед</button>
    </div>
</div>

<div class="popup" id="popup-2">
    <div class="popup__content">
        Popup #2
        <button type="button" data-close-popup="popup-2">Закрыть</button>
    </div>
</div>

<style>
    .popup {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      z-index: 1;
      background: rgba(255, 255, 255, 0.7);
      display: none;
      align-items: center;
      justify-content: center;
    }

    .popup.opened {
      display: flex;
    }

    .popup__content {
      border: solid 1px #000;
      box-shadow: 0 0 10px #000;
      padding: 10px 20px;
      max-width: 90%;
    }
</style>

<script>
    document.addEventListener('click', function(e) {
        var target = e.target,
            selector = '[data-open-popup], [data-close-popup]';

        if (!target || !target.matches || !target.matches(selector) && !(target = target.closest(selector))) {
            return;
        }

        var closePopupId = target.getAttribute('data-close-popup'),
            openPopupId = target.getAttribute('data-open-popup');

        closePopupId && closePopup(closePopupId);
        openPopupId && openPopup(openPopupId);
    });

    function closePopup(popupId) {
        document.getElementById(popupId).classList.remove('opened');
    };

    function openPopup(popupId) {
        document.getElementById(popupId).classList.add('opened');
    };
</script>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как закрыть ShadowBox окно из HTML-кода внутри него Роман Б. Events/DOM/Window 1 16.04.2015 19:52
Как открыть модальное окно в fancybox по ссылке? mbp64 jQuery 1 03.10.2012 14:22
Как запустить модальное окно из информационного окна google maps? www123 jQuery 5 04.09.2011 23:38
Как закрыть дочерние окно из родительского при помощи переключателя checkbox?? dieseln Общие вопросы Javascript 4 15.12.2010 16:30
Как закрыть динамичное окно вместе\после родительского? Vilmos Элементы интерфейса 1 16.07.2009 20:54