Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.05.2019, 20:55
Новичок на форуме
Отправить личное сообщение для lvov Посмотреть профиль Найти все сообщения от lvov
 
Регистрация: 23.04.2019
Сообщений: 5

Проблемы с magnific
Здравствуйте, подскажите, пожалуйста, как я могу открывать одно и то же окно magnific с помощью разных кнопок?
я реализовал так
$('#button_feedback,
#footer_button_feedback,#about_button_feedback').m agnificPopup,
но появилась проблема, если закрыть одно окно без перезагрузки страницы и попытаться открыть следующее с помощью другой кнопки, окно не появится, на нем так и останется display: none.
Ответить с цитированием
  #2 (permalink)  
Старый 18.05.2019, 22:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,872

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

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

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 18.05.2019, 23:14
Новичок на форуме
Отправить личное сообщение для lvov Посмотреть профиль Найти все сообщения от lvov
 
Регистрация: 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();
		});
		
	});

Полностью мой код, как мне его поправить, чтобы выводить окно при нажатии на каждую из кнопок?
Ответить с цитированием
  #4 (permalink)  
Старый 18.05.2019, 23:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,872

lvov,
не понимаю, где одно окно?
Ответить с цитированием
  #5 (permalink)  
Старый 18.05.2019, 23:45
Новичок на форуме
Отправить личное сообщение для lvov Посмотреть профиль Найти все сообщения от lvov
 
Регистрация: 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 у кнопок, которые как раз записаны в скрипт
Ответить с цитированием
  #6 (permalink)  
Старый 18.05.2019, 23:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,872

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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,872

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>
Ответить с цитированием
  #8 (permalink)  
Старый 19.05.2019, 00:04
Новичок на форуме
Отправить личное сообщение для lvov Посмотреть профиль Найти все сообщения от lvov
 
Регистрация: 23.04.2019
Сообщений: 5

Т.е. это именно из за того, что button? и по id привязка?
Ответить с цитированием
  #9 (permalink)  
Старый 19.05.2019, 00:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,872

Сообщение от lvov
Т.е. это именно из за того, что button? и по id привязка?
могу только гадать, что у вас не так, смотрите пост #7
Ответить с цитированием
  #10 (permalink)  
Старый 19.05.2019, 00:11
Новичок на форуме
Отправить личное сообщение для lvov Посмотреть профиль Найти все сообщения от lvov
 
Регистрация: 23.04.2019
Сообщений: 5

Думаю, разберусь, спасибо за помощь)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблемы со слайдером. Shupamen Работа 1 14.12.2013 22:12
проблемы с PagingToolbar serg3091 ExtJS 4 26.06.2013 08:33
Проблемы при установке модулей node.js tadjik1 AJAX и COMET 1 18.03.2012 00:20
Решение проблемы с отображением элементов на странице mozyr Javascript под браузер 17 13.01.2012 00:34
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 13:37