Пропадает кнопка закрытия в fancybox при добавлении внутрь него контента?

Question

[Мариана Марианова]

Я использую fancybox 3 и у меня есть такой код:

<div style="display: none;">
		<div class="form-popup">
			<div class="parent">
				<a href="close">крестик</a>
				<div id="widget"></div>
			</div>
		</div>
	</div>

В id widget у меня каждый раз при открытии окна добавляется код виджета и получается что, крестик у fancybox и вообще весь html внутри fancybox перекрывается кодом этого виджета. Как мне сделать так, чтобы крестик постоянно был на месте?

Comments

[secretsergey]

Код в песочницу закиньте.

[Мариана Марианова]

secretsergey, https://codepen.io/marishik92/pen/LYGRPWm?editors=1010
если открыть заново окно при нажатии на ту же кнопку - то крестик есть

Answer 1

[secretsergey]

С таким HTML кнопка есть всегда и кстати id должен быть уникальным :)

<a href="#marketWidgetmodal2" class="tooltip-window__button js-price-more">Узнать цены</a>

	<!-- Окно с виджетом -->
	<div style="display: none;">
		<div class="form-popup" id="marketWidgetmodal2">
			<div id="marketWidgetmodal"></div>
		</div>
	</div>

Comments

[Мариана Марианова]

сохранила актуальную версию, я там по ошибке два id одинаковых написала, мне нужен именно, так как виджет туда грузится

[secretsergey]

Мариана Марианова,
Крестик пропадает при первом открытии, т.к. виджет яндекса загружается и заменяет все содержимое контейнера. При повторных открытиях окна виджет не загружается, поэтому крестик остается. Самое простое решение обернуть блок в ещё 1 div и вызывать через fancybox его.