Question

我有两个模态，一个在另一个模式中。第一个模态包含一个表单，在提交时我想要另一个模态，其中有一个消息要打开。我用Bootstrap做了这个。单击此按钮时，将打开第一个模态：

<button class="contact-button" data-toggle="modal" data-target="#contact-modal">Contactează-ne</button>

这是第一个模式：

<div id="contact-modal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Contactaţi-ne</h4>
      </div>

      <div class="modal-body">

        <form id="contact-form">
          <div class="col-md-12">
            <h4>Numele Dvs *</h4>
            <input type="text" name="name" value="" placeholder="">
          </div>
          <div class="col-md-6">
            <h4>Email *</h4>
            <input type="text" name="email" value="" placeholder="johndoe@yahoo.com">
          </div>
          <div class="col-md-6">
            <h4>Telefon *</h4>
            <input type="text" name="tel" value="" placeholder="+40******">
          </div>
          <div class="col-md-12">
            <h4>Mesaj *</h4>
            <textarea></textarea>
          </div>
          <div class="col-md-12"><h6>*câmpurile sunt obligatorii</h6></div>
          <div class="col-md-12 call">
           <button>Trimite Mesaj</button>
          </div> 
        </form>
      </div> 
    </div>
  </div>
</div>

在提交时，第二个模态打开，我希望第一个模式在发生时关闭。我用这个脚本实现了这个目标：

$('form#contact-form').submit(function(e){
    e.preventDefault();
    $('#call-answer').modal();
    $('#contact-modal').hide(); // first modal closes
})

#call-answer是第二个模态，它也是用Bootstrap制作的，我只是手动打开它。所以，当页面加载一切正常时，我点击按钮，联系表单以模态打开，提交关闭，第二个模态打开。现在的问题是，如果我再次单击打开联系表单模式的按钮，它将一直打开，直到我点击两次。我知道问题与我的脚本有关，因为如果我删除了行

$('#contact-modal').hide();

一切正常。有谁更好地了解如何在第二个模式打开时关闭第一个模态？或者我该如何解决这个问题？感谢

Answer 1

问题在于此行$('#contact-modal').hide();

使用插件时不要使用hide

使用此行$('#contact-modal').modal('hide');

Demo

Reference

在模态内的第二次点击/模态上的Bootstrap模态打开

1 个答案: