18.05.2019, 20:55
|
|
Новичок на форуме
|
|
Регистрация: 23.04.2019
Сообщений: 5
|
|
|
Проблемы с magnific
Здравствуйте, подскажите, пожалуйста, как я могу открывать одно и то же окно magnific с помощью разных кнопок?
я реализовал так
$('#button_feedback,
#footer_button_feedback,#about_button_feedback').m agnificPopup,
но появилась проблема, если закрыть одно окно без перезагрузки страницы и попытаться открыть следующее с помощью другой кнопки, окно не появится, на нем так и останется display: none.
|
|
18.05.2019, 22:33
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
lvov,
нужен минимальный макет
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
|
|
18.05.2019, 23:14
|
|
Новичок на форуме
|
|
Регистрация: 23.04.2019
Сообщений: 5
|
|
$(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();
});
});
Полностью мой код, как мне его поправить, чтобы выводить окно при нажатии на каждую из кнопок? |
|
18.05.2019, 23:29
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
lvov,
не понимаю, где одно окно?
|
|
18.05.2019, 23:45
|
|
Новичок на форуме
|
|
Регистрация: 23.04.2019
Сообщений: 5
|
|
Каждая кнопка запускает одно и то же окно, это модуль обратной связи, верстка примерно такая
<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 у кнопок, которые как раз записаны в скрипт |
|
18.05.2019, 23:45
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
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>
|
|
19.05.2019, 00:04
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
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>
|
|
19.05.2019, 00:04
|
|
Новичок на форуме
|
|
Регистрация: 23.04.2019
Сообщений: 5
|
|
|
Т.е. это именно из за того, что button? и по id привязка?
|
|
19.05.2019, 00:07
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Сообщение от lvov
|
|
Т.е. это именно из за того, что button? и по id привязка?
|
могу только гадать, что у вас не так, смотрите пост #7 |
|
19.05.2019, 00:11
|
|
Новичок на форуме
|
|
Регистрация: 23.04.2019
Сообщений: 5
|
|
|
Думаю, разберусь, спасибо за помощь)
|
|
|
|
