Форум

lvov · #1 (**permalink**) 18.05.2019, 20:55

Здравствуйте, подскажите, пожалуйста, как я могу открывать одно и то же окно magnific с помощью разных кнопок?
я реализовал так
$('#button_feedback,
#footer_button_feedback,#about_button_feedback').m agnificPopup,
но появилась проблема, если закрыть одно окно без перезагрузки страницы и попытаться открыть следующее с помощью другой кнопки, окно не появится, на нем так и останется display: none.

рони · #2 (**permalink**) 18.05.2019, 22:33

lvov,
нужен минимальный макет
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

lvov · #3 (**permalink**) 18.05.2019, 23:14

$(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();
		});
		
	});

Полностью мой код, как мне его поправить, чтобы выводить окно при нажатии на каждую из кнопок?

рони · #4 (**permalink**) 18.05.2019, 23:29

lvov,
не понимаю, где одно окно?

lvov · #5 (**permalink**) 18.05.2019, 23:45

Каждая кнопка запускает одно и то же окно, это модуль обратной связи, верстка примерно такая

<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 у кнопок, которые как раз записаны в скрипт

рони · #6 (**permalink**) 18.05.2019, 23:45

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>

рони · #7 (**permalink**) 19.05.2019, 00:04

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>

lvov · #8 (**permalink**) 19.05.2019, 00:04

Т.е. это именно из за того, что button? и по id привязка?

рони · #9 (**permalink**) 19.05.2019, 00:07

Сообщение от lvov

Т.е. это именно из за того, что button? и по id привязка?

могу только гадать, что у вас не так, смотрите пост #7

lvov · #10 (**permalink**) 19.05.2019, 00:11

Думаю, разберусь, спасибо за помощь)

Форум

Справочник

Discord чат

Курсы javascript