На странице сайта динамически генерируется некий список объектов, у каждого из которых есть кнопка "пройти опрос", которая выглядит примерно так (допустим, на сегодняшний день на странице у меня 3 такие кнопки):
<a class="members-link perform-premiere" style="display:none; width: auto;margin: 0 0 0 0;text-align: center;" data-fancybox="simple-dialog" data-src="#dialog-content-night">
<div class="pft-api--button size-default" style="margin:auto; color:#fff; border: 1px solid rgb(0, 0, 0);">Пройти опрос</div>
</a>
И имеется статичный div (вне динамически генерируемой области) с формой опроса:
<div id="dialog-content-night" style="display:none;">
<h4 align="left">Опрос</h4>
<form id="form_survey" method="post">
<p class="about">Представьтесь, пожалуйста</p>
<input placeholder="ваше имя" type="text" name="sname" id="survey_name">
<p class="about">Укажите, как с вами можно связаться</p>
<input placeholder="номер или email" type="text" name="semail" id="survey_email">
<p class="about">Сколько вы готовы потратить на билет</p>
<input type="range" name="sprice" min="300" max="15000" value="3000" step="100" id="survey_price" onchange="document.getElementById('rangeValue').innerHTML = this.value+'рублей';">
<p class="about" id="rangeValue">3000 рублей</p>
<button id="survey_submit">ОТПРАВИТЬ</button>
</form>
</div>
На сайте используется fancybox библиотека V3, библиотека bootstrap V5 и jquery V3.6.0
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
Казалось бы, что может пойти не так? Но в итоге, когда я нажимаю на любую из кнопок "пройти опрос", у меня на одну секунду открывается окно с формой и тут же пропадает, зато остается интерфейс перехода вперед-назад между слайдами (ну как в галерее), в каждом из которых появляется тот же самый экземпляр моей модальной формы, точно так же через секунду исчезающий. Ну и слайды нумеруются, соответственно: #simple-dialog-1, #simple-dialog-2, #simple-dialog-3. Я перечитала всю скудную документацию по api fancybox, но так и не поняла, что нужно сделать, чтобы все кнопки на странице открывали нормально тот самый единственный экземпляр блока #dialog-content-night? Помогите, пожалуйста.
