Semantic Ui Модал дублируется на повторных вызовах
У меня есть кусок кода JQuery, который загружает файл как
$(".data_container").load(base_path+"sign_up/signup.php?trigger_id=random");
Registration.php содержит
<?php include_once("../libs/php_header/php_header.php"); ?>
<div class="ui modal s_umodal">
<i class="close icon"></i>
<div class="header">
Modal Title
</div>
<div class="image content">
<div class="image">
An image can appear on left or an icon
</div>
<div class="description">
A description can appear on the right
</div>
</div>
<div class="actions">
<div class="ui button">Cancel</div>
<div class="ui button">OK</div>
</div>
</div>
<script>
$('.s_umodal')
.modal('show');
</script>
Проблема в том, что я могу вызвать модальное окно, и оно появляется. но в следующий раз, когда я нажимаю на кнопку триггера (кнопку, чтобы показать модальный режим), она отображает другую, хотя я закрыл предыдущую. так что теперь у меня осталось две модальные коробки. и если я нажму несколько раз, у меня останется несколько модальных блоков. Я использую Semantic-UI.
Решение
Проблема с вашей реализацией в том, что каждый раз, когда вы звоните $('.data_container').load(base_path+"sign_up/signup.php?trigger_id=random"); вы создаете новый элемент dom с div, который вы извлекаете из этого вызова ajax. $('.s_umodal').modal('show'); затем показывает все модальные поля, возвращаемые с сервера.
Без существенной реструктуризации кода, один из подходов состоит в том, чтобы не продолжать извлекать содержимое div снова и снова. <div> будет частью основного HTML, который содержит data_container. Ваш Ajax-вызов может вернуть скрипт, отображающий диалоговое окно.
HTML:
<div class="data_container"></div>
<div class="ui modal s_umodal">
<i class="close icon"></i>
<div class="header">
Modal Title
</div>
<div class="image content">
<div class="image">
An image can appear on left or an icon
</div>
<div class="description">
A description can appear on the right
</div>
</div>
<div class="actions">
<div class="ui button">Cancel</div>
<div class="ui button">OK</div>
</div>
</div>
Ваш Ajax-вызов может быть возвращен:
<script>
$('.s_umodal').modal('show');
</script>
Ваш звонок для загрузки контента может остаться прежним.
$(".data_container").load(base_path+"sign_up/signup.php?trigger_id=random");
Однако если вас ждут значительные изменения, вы можете попытаться использовать веб-службы JSON вместо возврата <script>,
Другие решения
Других решений пока нет …