Question

我正在使用ajax调用显示关于模态的通知，ajax和php代码很好，它仅在第一次显示模态时的通知，在第二次单击锚点时它不会加载"modal-dialogue" div和"modal-content"但它加载"modal fade modal-form in" div。当我调试它时，我看到在上面的两个div上都没有显示，我知道我可以用javascript处理它们，但我认为这不是解决方案。

我在那里缺少的，请指导

<a class="flag-list" href="#" data-toggle="modal" data-target="#user-flag">
  <i class="icon-flag6"></i>' . esc_html__( 'Flag as inappropriate' ) .
</a>
<div class="modal fade modal-form" id="user-flag" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
          <span aria-hidden="true">&times;</span> 
        </button>
        <h3 class="modal-title" id="flagModalLabel">
          <?php echo esc_html__( 'Flag' ); ?>
        </h3>
      </div>
      <div class="modal-body">
        <form id="cs_flag_user">
          <input type="hidden" name="name_one">
          <input type="hidden" name="name_two">
          <textarea></textarea>
        </form>
      </div>
    </div>
  </div>
</div>

Answer 1

似乎您可能在服务器端出现问题，页面中的代码或任何更改的表单提交可能是DOM，打开控制台并找出确切的问题会更容易。

您的代码的完整演示正在Codepen here中运行。我刚用简单的文字替换了您的php代码，检查并留下您的评论以备不时之需。

如果你需要轻松使用模态窗口，我已经编写了基于bootstrap4的开源模态窗口包装器插件，你也可以找到demos and how to use here。

Answer 2

尝试避免数据切换=＆＃34;模态＆＃34;数据目标=＆＃34;＃用户标志＆＃34;

并使用jquery显示和隐藏模态。

如果通过ajax加载通知，则在该ajax成功显示模态。

第二次单击时不加载bootstrap模式

2 个答案: