javascript - 单击模态内的 div 时隐藏 Bootstrap 模态

Question

为什么我的模式没有关闭？请帮忙 我试图在单击模态内的 div 时关闭模态。 以下是代码。当我点击它时什么也没有发生。

        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Select Language</h4>
              </div>
              <div class="modal-body"> 
                <button type="button" class="btn" data-dismiss="modal">Close</button>
                <button type="button" class="btn" id="submit_form">Submit</button>
              </div>

              <div class="modal-footer">
                <script>                    
                $('.modal-footer').click(function() {
                   $('.modal').modal('hide');

                });
                $('.test').click(function() {
                   $('.modal').modal('hide');

                });   
                </script>

              </div>
            </div>
          </div>
        </div>    

Answer 1

首先，最好将 jquery 函数包含在 $(function(){});

您是否包含了 Bootstrap JS 文件？

您打算点击哪个 div 来关闭模态框？您的代码是正确的，但您使用了“.test”选择器，而没有使用测试类的 div。

无论如何，您的代码应该可以工作。

            $(function(){                    
                $('.modal-footer').click(function() {
                   $('.modal').modal('hide');

                });
                $('.test').click(function() {
                   $('.modal').modal('hide');

                });   
            });

添加了“.test”div。 http://jsfiddle.net/52VtD/8967/