Подскажите пожалуйста. Мне нужно открыть модальное окно когда одно уже открыто.
такое возможно?
знаю что так можно в fancybox 3
.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуПодскажите пожалуйста. Мне нужно открыть модальное окно когда одно уже открыто.
такое возможно?
знаю что так можно в fancybox 3
.
С 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>
Можно. Вот наглядный пример:
<!-- Add jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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>