Close button disappears in fancybox when adding content inside it?

Question

JavaScript

I am using fancybox 3 and I have this code:

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

Every time I open a window, the code of the widget is added to the widget id, and it turns out that the fancybox cross and, in general, all the html inside the fancybox is covered by the code of this widget. How can I make sure that the cross is always in place?

Answer 1

With this HTML, the button is always there, and by the way, the id must be unique :)

<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>