语义 Ui 模态重复调用

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>

问题是，我可以调用模态框并显示出来。但是下次我单击触发按钮（显示模式的按钮）时，即使我关闭了前一个，它也会显示另一个。所以现在我只剩下两个模式框了。如果我点击多次，我将留下多个模式框。我正在使用语义-UI.

Answer 1

您的实施存在的问题是，每次调用 $('.data_container').load(base_path+"sign_up/signup.php?trigger_id=random"); 时，您都会创建一个新的 dom 元素，其中包含您从 ajax 调用中获取的 div . $('.s_umodal').modal('show'); 然后显示从服务器 return 编辑的所有模式框。

在不显着重构代码的情况下，一种方法是不要一遍又一遍地获取 div 的内容。 <div> 将成为包含 data_container 的主要 html 的一部分。您的 Ajax 调用可以 return 显示对话框的脚本。

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 呼叫可能是 returning:

<script>
  $('.s_umodal').modal('show');
</script>

您加载内容的调用可以保持不变。

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

但是，如果您准备进行重大更改，您可以尝试使用 JSON 网络服务而不是 returning <script>。

语义 Ui 模态重复调用

Semantic Ui Modal duplicated on repeated calls

php

semantic-ui