如果单击内部的按钮，则关闭模式

Question

我想做的是借助Bootstrap中的模式对话框进行单页表单切换。

我的问题是，当我单击模态对话框中的按钮时，模态对话框不会关闭，但表单开关已成功切换...如果我单击模态对话框中的任何按钮，没有人知道如何关闭模态对话框吗？

模式对话框的HTML：

<a data-toggle="modal" href="#myModal">Click me</a></li>

<div class="container">
  <div class="row">
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-body">
           <form class="form-horizontal">
             <div class="form-group">
               <div class="col-sm-offset-2 col-sm-10">
                 <button type="button" id="show_first" class="btn btn-primary" data-dismiss="modal" aria-hidden="true">First</button>
                 <button type="button" id="show_second" class="btn btn-info" data-dismiss="modal" aria-hidden="true">Second</button>
               </div>
             </div>
           </form>
          </div>
       </div>
     </div>
   </div>
 </div>
</div>

<div class="container">
  <div class="myFirst">
    <div class="row">
      <center>
        <h1>First Page</h1>
      </center>
    </div>
  </div>
  <div class="mySecond">
    <div class="row">
      <center>
        <h1>Second Page</h1>
      </center>
    </div>
  </div>        
</div>

脚本：

<script type="text/javascript">
    $(function(){
        $('.myFirst').hide();
        $('.mySecond').hide();
        $('#show_first').click(function(){
            $('.mySecond').hide();
            $('.myFirst').show();
            return false;
        });
        $('#show_second').click(function(){
            $('.myFirst').hide();
            $('.mySecond').show();
                return false;
        });
    });
</script>

Answer 1

如评论中所述，您可以在引导程序中调用.modal('hide')关闭模态窗口，因此可以将其添加到绑定的单击事件中，如下所示：

$('#show_first').click(function(){
    $('.mySecond').hide();
    $('.myFirst').show();
    $('.modal').modal('hide');
    return false;
});

$('#show_second').click(function(){
    $('.myFirst').hide();
    $('.mySecond').show();
    $('.modal').modal('hide');
    return false;
});