Проблемы с magnific
Здравствуйте, подскажите, пожалуйста, как я могу открывать одно и то же окно magnific с помощью разных кнопок?
я реализовал так $('#button_feedback, #footer_button_feedback,#about_button_feedback').m agnificPopup, но появилась проблема, если закрыть одно окно без перезагрузки страницы и попытаться открыть следующее с помощью другой кнопки, окно не появится, на нем так и останется display: none. |
lvov,
нужен минимальный макет Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
$(function () {
$('#button_feedback, #footer_button_feedback, #about_button_feedback').magnificPopup({
type: 'inline',
modal: true,
fixedContentPos: true,
fixedBgPos: false,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'mfp-fade'
});
$(document).on('click', 'button.close', function () {
//e.preventDefault();
$.magnificPopup.close();
});
});
Полностью мой код, как мне его поправить, чтобы выводить окно при нажатии на каждую из кнопок? |
lvov,
не понимаю, где одно окно? |
Каждая кнопка запускает одно и то же окно, это модуль обратной связи, верстка примерно такая
<button type="button" id="button_feedback" class="contact" data-toggle="modal" data-target="#modalFeedback"><img class="img-svg contact-icon" src="catalog/view/theme/leaderboats/image/phone.svg" alt="phone">Заказать звонок</button> и само окно <div class="modal fade" id="modalFeedback" tabindex="-1" role="dialog" aria-labelledby="modalFeedbackLabel" aria-hidden="true"> Код обратной связи </div> Меняются только id у кнопок, которые как раз записаны в скрипт |
lvov,
три кнопки, для одного окна в моём понимании это так.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script>
$(function () {
$('.open-popup-link').magnificPopup({
type:'inline',
midClick: true
});
});
</script>
</head>
<body>
<a href="#test-popup" class="open-popup-link">Show inline popup</a>
<a href="#test-popup" class="open-popup-link">Show inline popup</a>
<a href="#test-popup" class="open-popup-link">Show inline popup</a>
<div id="test-popup" class="white-popup mfp-hide">
Popup content
</div>
</body>
</html>
|
lvov,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css">
<style type="text/css">
#modalFeedback {
background-color: #FFFF00;
}
.mfp-close-btn-in .mfp-close {
color: #FFFFFF;
background-color: #1E90FF;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script>
$(function () {
$('.contact').magnificPopup(
{ items: {
src: '#modalFeedback',
type: 'inline'
}
});
});
</script>
</head>
<body>
<button type="button" class="contact" ><img class="img-svg contact-icon" src="catalog/view/theme/leaderboats/image/phone.svg" alt="phone">Заказать звонок</button>
<button type="button" class="contact" ><img class="img-svg contact-icon" src="catalog/view/theme/leaderboats/image/phone.svg" alt="phone">Заказать звонок</button>
<button type="button" class="contact" ><img class="img-svg contact-icon" src="catalog/view/theme/leaderboats/image/phone.svg" alt="phone">Заказать звонок</button>
<div class="modal fade white-popup mfp-hide" id="modalFeedback" tabindex="-1" role="dialog" aria-labelledby="modalFeedbackLabel" aria-hidden="true">modalFeedback</div>
</body>
</html>
|
Т.е. это именно из за того, что button? и по id привязка?
|
Цитата:
|
Думаю, разберусь, спасибо за помощь)
|
| Часовой пояс GMT +3, время: 19:10. |