Проблемы с 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, время: 22:19. |