TransWikia.com

Закрыть только одну Magnific Popup

Stack Overflow на русском Asked on January 6, 2022

Помогите, пожалуйста разобраться с Magnific Popup. Нужно после инициализации скрипта закрыть одно popup окно и открыть другое.
Как это можно сделать? $.magnificPopup.close(); закрывает оба окна. А без $.magnificPopup.close(); первое окно закрывается после второго нажатия по кнопке и скрипт работает! Но нужно одно нажатие! Заранее всем большое СПАСИБО!

$('.first-popup-link').magnificPopup({
  closeBtnInside: true
});

$('#submit-button').click(function() {
  var name = $('#first-popup input[name="name"]').val();

  if (name.length < 1) {
    return false;
  }

  $.magnificPopup.close();

  $('.second-popup-link').magnificPopup({
    type: 'inline',
    fixedContentPos: true,
    removalDelay: 200,
    showCloseBtn: true,
  });
});
.white-popup {
  position: relative;
  background: #FFF;
  padding: 40px;
  width: auto;
  max-width: 200px;
  margin: 20px auto;
  text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css">

<a href="#first-popup" class="first-popup-link">Open first popup</a>

<!-- Contents of first window -->
<div id="first-popup" class="mfp-hide white-popup">
  First window<br/>
  <input style="width: 100%;" type="text" name="name" required placeholder="Ваше имя*">
  <a id="submit-button" href="#second-popup" class="second-popup-link">Wanna open second?!</a>
</div>

<!-- Contents of second window -->
<div id="second-popup" class="mfp-hide white-popup">Second window<br/>
  <a href="#first-popup" class="first-popup-link">Get back to first?!</a>
</div>
ifjavascriptmagnificpopup

2 Answers

Проковырялся пару часов - тоже не получилось. ) Вам обязательно надо 2 раздельных модальных окна ? Нельзя скрывать форму и показывать сообщение о успехе в рамках того же модального окна ? Пример ниже.

$('.first-popup-link').magnificPopup({
  callbacks: {
    close: function() {
      $('.form').show();
      $('.success').hide();
    }
  }
});

$('#submit').on('click', function() {
  if ($('#first-popup input[name="name"]').val().length < 1) {
    return false;
  } else {
    // Ваш скрипт успеха
    $('.form').hide();
    $('.success').show();
  }
});

$('.backForm').on('click', function() {
    $('.form').show();
    $('.success').hide();
});
.white-popup {
  position: relative;
  background: #FFF;
  padding: 40px;
  width: auto;
  max-width: 200px;
  margin: 20px auto;
  text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css">

<a href="#first-popup" class="first-popup-link">Open first popup</a>

<!-- Contents of first window -->
<div id="first-popup" class="mfp-hide white-popup">
  <div class="form">
    <input style="width: 100%;" type="text" name="name" required placeholder="Ваше имя*" >
    <a class="button" href="#second-popup" id="submit">ОФОРМИТЬ</a>
  </div>
  
  <div class="success" style="display: none">
    Успех
    <br><br>
    <a href="javascript:" class="backForm">Отправить еще раз</a>
  </div>
</div>

Answered by Crus on January 6, 2022

Если сделать вот так, то код работает, но по ТОЛЬКО по двойному нажатию на кнопку и это не пойдет, потому что тогда в CRM уйдет две заявки! Но, лучшего решения не нашел!

HTML

<a href="#first-popup" class="first-popup-link">Open first popup</a>

<!-- Contents of first window -->
<div id="first-popup" class="mfp-hide white-popup">
  First window<br/>
  <input style="width: 100%;" type="text" name="name" required placeholder="Ваше имя*" >
  <a class="button" href="#second-popup" id="submit">ОФОРМИТЬ</a>
</div>

<!-- Contents of second window -->
<div id="second-popup" class="mfp-hide white-popup">Second window<br/>
<a href="#first-popup" class="first-popup-link">Get back to first?</a>
</div>

СSS

.white-popup {
  position: relative;
  background: #FFF;
  padding: 40px;
  width: auto;
  max-width: 200px;
  margin: 20px auto;
  text-align: center;
}

JS

$('.first-popup-link,.second-popup-link').magnificPopup({
});

$('#submit').click(function() {
  var name = $('#first-popup input[name="name"]').val();

    if (name.length < 1) {
        return false;
    }
$.magnificPopup;
$(this).magnificPopup({
    items: {
      src: '#second-popup'
      }
  });
});

Answered by Роман Мельников on January 6, 2022

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP