Модальное окно Magnific Popup и вываливающийся тег a

412
31 мая 2017, 03:10

Всем здравия! Имеется модальное окно от MagnificPopup. Все содержимое окна, завернуто в тег , и имеет такой вид:

<a href="#" class="portfolio-item"> 
  <div class="rem-img-wrap"> 
    <img class="responsive-img" src="img/iPhone/iphone4.png" alt="iPhone"> 
  </div> 
 
  <h4>iPhone 4/4S</h4> 
 
  <span class="hidden"> 
												<span class="portfolio-popup price-popup"> 
													<span class="container-fluid"> 
														<span class="row"> 
															<span class="col-xs-4 col-sm-3 col-md-3 col-lg-3"> 
																<img class="img-responsive" src="img/iPhone/iphone4.png" alt="Alt"> 
															</span> 
  <span class="col-xs-12 col-sm-9 col-md-9 col-lg-9"> 
																<h2>Выберите неисправность:</h2> 
																<span class="but iphone"> 
																	<button data-id="wd"><i class="ion-waterdrop"></i></button> 
																	<button data-id="wf"><i class="ion-wifi"></i></button> 
																	<button data-id="vm"><i class="ion-volume-mute"></i></button> 
																	<button data-id="mc"><i class="ion-ios-mic-off"></i></button> 
																	<button data-id="ca"><i class="ion-ios-camera"></i></button> 
																	<button data-id="bt"><i class="ion-ios-bolt"></i></button> 
																	<button data-id="hm"><i class="ion-hammer"></i></button> 
																	<button data-id="eye"><i class="ion-eye-disabled"></i></button> 
																	<button data-id="bug">iOS</button> 
																	<button data-id="bat"><i class="ion-battery-low"></i></button> 
																	<button data-id="qa"><i class="ion-help"></i></button> 
																</span> 
 
  </span> 
 
  <span class="col-xs-12 col-sm-9 col-md-9 col-lg-9"> 
																<h2>Описание:</h2> 
 
 
																<span class="portfolio-popup-text"> 
																	<p> 
																		<span class="prev">^Выберете неисправность выше^</span> 
 
  <span class="hidden-wd"> 
																			Чай 
																		</span> 
  <span class="hidden-wf"> 
																			Высокогорный 
																		</span> 
  <span class="hidden-vm"> 
																			Ребята 
																		</span> 
  <span class="hidden-mc"> 
																			Пили 
																		</span> 
  <span class="hidden-ca"> 
																			Днем 
																		</span> 
  <span class="hidden-bt"> 
																			На горе 
																		</span> 
  <span class="hidden-hm"> 
																			Высокой 
																		</span> 
  <span class="hidden-eye"> 
																			В палатке 
																		</span> 
  <span class="hidden-bug"> 
																			С шашлычком. 
																		</span> 
  <span class="hidden-bat"> 
																			В кустиках следил за ними 
																		</span> 
  <span class="hidden-qa"> 
																			Ара! 
																		</span> 
  </p> 
 
  </span> 
 
  <a href="#callback" class="button button-acc" data-form="Уточнить стоимость ремонта">Уточнить стоимость ремонта</a> 
 
  </span> 
  </span> 
  </span> 
  </span> 
 
  </span> 
 
 
 
</a>

Однако мне нужна кнопка "Уточнить стоимость ремонта" внутри попап окна, а не снаружи как видно из скриншота выше. Проблема в том что данная кнопка оформлена в виде тега и должна открывать другое модальное окно с формой обратной связи. Таким опытным образом, я выяснил что в тег , другой тег не вложить.

Из предпринятого:

1) Пробовал перестроить систему как в данном примере http://shperung.16mb.com/%D0%BC%D0%BE%D0%B4%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5-%D0%BE%D0%BA%D0%BD%D0%B0/magnific-popup.html В итоге результата не получил и только запутался. 2) Пробовал через JS навешивать на событие onclick у button такую вещь: window.location.href = "#callback" Скрипт срабатывал, только это было заметно в адресной строке - в ней прописывался путь "сайт/#callback" однако форма обратной связи не выскакивала. 3) Предпринимал разные попытки обойти тег а, но безуспешно.

Прошу, людей работавших с данным плагином, и подобными ему, наставить на путь истинный=) Форма обратной связи:

<div class="hidden"> 
	<form id="callback" class="contact-form"> 
		<input type="hidden" name="admin-data" value="Заявка с внешней страницы"> 
 
		<label> 
			<input type="text" name="Имя" placeholder="Ваше имя..."> 
		</label> 
 
		<label> 
			<input type="text" name="Телефон" placeholder="Ваш телефон..." required> 
		</label> 
 
 
		<div class="col-sm-12"> 
			<button class="button button-acc">Отправить</button> 
		</div> 
 
	</form> 
</div>

Кнопка вызова формы обратной связи:

<a href="#callback" class="button" data-form="Отправить заявку">ОТПРАВИТЬ ЗАЯВКУ</a>

READ ALSO
атрибут defer и механизм $(document).ready

атрибут defer и механизм $(document).ready

Какая разница между использованием:

201
Проблемы с name у тега input, при нажатии на кнопку добавлять блок &lt;div&gt;

Проблемы с name у тега input, при нажатии на кнопку добавлять блок <div>

Вопрос состоит в следующем, есть некая форма (карточка) на ней есть текст филды, на каждом есть имя (по которому будет осуществляться дальнейшая...

272
Правильная верстка html

Правильная верстка html

Всем привет! Ставил верстку на сайт, и в шаблоне есть табличный элемент, но свертсанный div-ми

253