Открытие двух модальных окон fancybox 2

512

16 февраля 2017, 00:11

Подскажите пожалуйста. Мне нужно открыть модальное окно когда одно уже открыто.

такое возможно?

знаю что так можно в fancybox 3.

Answer 1

Можно. Вот наглядный пример:

<!-- Add jQuery library --> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
 
 
<!-- Add fancyBox --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" type="text/css" media="screen" /> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script> 
 
 
<a class="fancybox" rel="group" href="#foo">Открыть окно</a> 
 
<div style="display: none" id="foo">Окно 1<br><a class="fancybox" rel="group" href="#foo-2">Открыть окно 2</a></div> 
<div style="display: none" id="foo-2">Окно 2</div> 
 
<script type="text/javascript"> 
  $(document).ready(function() { 
$(".fancybox").fancybox(); 
  }); 
</script>

Answer 2

С fancybox не работал, но модалки можно сделать и без него. Обычно в вебе делается так: открывается модальное окно, когда нужно второе открыть, первое скрывается, а вторая модалка показывается. Вот небольшой пример.

function togglePopup(state,id) { 
  toggleModalById(id); 
  $('.container-modal')[state ? 'fadeIn': 'fadeOut'](); 
} 
 
function toggleModalById(id) { 
  $('.modal-block').hide(); 
  $(id).show(); 
} 
 
$('#btn-for-modal1').click(function () { 
       togglePopup(true, '#modal1'); 
}) 
$('#btn-for-modal2').click(function () { 
       togglePopup(true, '#modal2'); 
}) 
 
$('.container-modal').click(function () { 
    togglePopup(false); 
 })

.container-modal { 
   height:100%; 
  width:100%; 
  position:fixed; 
  background:rgba(0,0,0,0.5); 
  text-align:center; 
  display:none; 
} 
 
.modal-block { 
  padding:20px; 
  background: #fff; 
  position:absolute; 
  top:10%; 
  left:25%; 
  display:none; 
} 
 
.toggle-btn { 
   
  margin-top:200px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<div class="container-modal"> 
     <div id="modal1" class="modal-block"> 
         <div>Первое мождальное окно</div> 
     </div> 
   
       <div id="modal2" class="modal-block"> 
         <div>Второе мождальное окно</div> 
     </div> 
</div> 
 
<button id="btn-for-modal1" class="toggle-btn">toggle modal 1</button> 
 
<button id="btn-for-modal2" class="toggle-btn ">toggle modal 2</button>