二次单击时的自举模态打开/模态内部的模态 [英] Bootstrap modal opening on second click / modal inside modal

问题描述

我有两个模态，一个在另一个内.第一个模态包含一个表单，并且在提交时我想打开另一个带消息的模态.我是用Bootstrap做的. 单击此按钮时，第一个模态打开:

I have two modals, one inside another. The first modal contains a form and on submit I want another modal with a message in it to open. I made this with Bootstrap. First modal opens when this button is clicked :

<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="[e-mail]">
          </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>

在提交时，第二个模式打开，我希望第一个模式在发生这种情况时关闭.我是通过以下脚本实现的:

On submit, the second modal opens and I want the first one to close when this happens. I achieved this with this script:

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

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

#call-answer is the second modal, it's also made with Bootstrap, I only open it manually. So, when the page loads everything works fine, I click the button, the contact form opens in a modal, on submit it closes and the second modal opens. Now the problem is that if I click again on the button that opens the contact form modal, it doesen't open until I click two times. I know the problem has to do with my script, because if I remove the line

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

一切正常.有谁对第二个模式打开时如何关闭第一个模式有更好的主意?或我该如何解决?谢谢

everything works just fine. Has anyone a better idea on how can I close the first modal when the second opens? or how can I solve this? Thanks

推荐答案

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

在使用插件时不要使用hide

Don't use hide when working with plugins

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

演示

参考

这篇关于二次单击时的自举模态打开/模态内部的模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！