使用ajax关闭模式后无法重新打开模式答案

【问题标题】：Can't re open the modal after closing it using ajax使用ajax关闭模式后无法重新打开模式
【发布时间】：2019-07-09 04:08:57
【问题描述】：

我有一个在主页中单击按钮时触发的模式。它工作并显示成功模式并关闭 url 模式。但我的问题是，如果我再次单击该按钮，则无法显示 url 模态。这是我的代码。

<button class="btn pink apply_btn" type="submit" name="button">Apply</button> //my apply button in the page

<form class="search_form" action="" method="">
@csrf
   <label>
      <input type="url" required id="instagramLink" value="" placeholder="Instagram Post URL (Paste Here)">
      <p>
        <span class="alert"></span>
      </p>
   </label>
  <div class="flex_box">
     <button class="btn pink" type="button" id="save">Apply</button>
  </div>
</form>
<script src="{{ url('/assets/js/modal.js') }}"></script>

这是我关闭 url 模式的 ajax 代码。

success: function(store) {
       $(".apply_modal").hide();
       $(".applyfnsh_modal").toggleClass("open");
       $('.alert').html('');
},
error: function() {
        $('.alert').html('Error occured while applying. Please try again.');
}

在我的modal.js

//apply pop up
$(".apply_btn").on("click", function(){
    $(".apply_modal").toggleClass("open");
    $("body").toggleClass("open");
});
$(".modal_close").on("click", function(){
    var modal = $(this).parent("div").parent("div");
    modal.toggleClass("open");
    $("body").toggleClass("open");
});
$(".apply_modal").on('click touchend', function(event) {
    if (!$(event.target).closest('.apply_box').length) {
    $(".apply_modal").toggleClass("open");
    $("body").toggleClass("open");
    }
});

因此，当 url 有效时，保存到 db 并显示成功模式，这有效，但再次单击页面中的应用按钮，不会再次显示 url 模式。我已经尝试了here 的答案，但没有任何效果。

【问题讨论】：

您能否添加初始化模态以在单击按钮时打开的代码？此代码中不存在您的问题...我想查看按钮单击初始化逻辑，以及保存数据时触发的逻辑。
@MichaelMiller 用 js 文件的位置更新了我的问题。
关闭模态的逻辑/html在哪里？
@MichaelMiller 在问题中的此声明 And this is my ajax code in closing the url modal. 下。谢谢。

标签： ajax laravel modal-dialog laravel-blade

【解决方案1】：

好的，这就是我想发生的事情...$(".apply_modal").hide(); 正在将您的模态样式设置为“显示：无；”直接放到 DOM 元素上。为了显示您的模态，您的代码只是将一个“开放”类应用于模态。 DOM 元素的任何本地样式都会覆盖 CSS 中的任何样式。这意味着应用于“open”类的 CSS 样式无关紧要，因为 div 本身有一个 style 属性，并且该 style 属性包含“display: none”。要解决此问题，只要有 .toggleClass("open"); 的实例，请添加“显示”声明 (.toggleClass("open").show();)。如果这可行，您应该进行一些认真的重构，但它至少会让您知道我们是否走在正确的轨道上。

【讨论】：