Question

我有一段jquery代码，它将文件加载为

$(".data_container").load(base_path+"sign_up/signup.php?trigger_id=random");

Signup.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。

Answer 1

您的实现问题是，每次调用$('.data_container').load(base_path+"sign_up/signup.php?trigger_id=random");时，您都要使用从该ajax调用中获取的div创建一个新的dom元素。然后$('.s_umodal').modal('show');显示从服务器返回的所有模态框。

如果不重新调整代码，一种方法是不要一遍又一遍地继续获取div的内容。 <div>将是包含data_container的主html的一部分。您的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 Web服务而不是返回<script>。

Semantic Ui Modal在重复调用时重复

1 个答案: