Question

我有一个模态，当在主页中单击按钮时会触发该模态。它可以正常工作，显示成功模式，并关闭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并显示成功模式，但是可以成功，但是再次单击页面中的Apply按钮，不会再次显示url模式。我已经尝试了答案here，但没有任何帮助。

Answer 1

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

使用ajax关闭模态后无法重新打开模态

1 个答案: