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

【问题标题】：Close modal if a button inside is clicked如果单击内部按钮，则关闭模式
【发布时间】：2014-05-19 13:47:44
【问题描述】：

我想做的是在引导程序中借助模态对话框进行单页表单切换。

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

模态对话框的 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>

【问题讨论】：

标题有点混乱！
您可以通过在模态窗口上调用$('.modal').modal('hide') 来关闭绑定到按钮的单击事件的模态。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

如 cmets 中所述，在引导程序中，您可以调用 .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;
});

【讨论】：