Bootstrap 3.3.6复选框触发Modal弹窗失效问题求助

我仔细看了你的代码，发现两个关键问题导致功能无法正常工作，咱们来一步步修复：

问题1：脚本加载顺序错误 #

Bootstrap的JavaScript组件依赖jQuery才能正常运行，你现在把Bootstrap JS放在jQuery之前加载，这会导致Bootstrap无法初始化模态框相关功能，直接引发控制失效。

问题2：模态框关闭按钮未绑定关闭事件 #

你模态框头部的×关闭按钮，没有添加data-dismiss="modal"属性，导致点击它无法关闭模态框，这是一个额外的小问题，顺便一起修复。

另外，你的jQuery代码可以稍微优化一下，用$(this)代替重复选择#tos-checkbox，提升代码效率。

修复后的完整代码 #

<!-- 先加载jQuery -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- 再加载Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<input id="tos-checkbox" type="checkbox"> 
<span>I agree to the Terms And Conditions.</span> 

<div class="modal fade" id="tosmodal" role="dialog"> 
  <div class="modal-dialog"> 
    <!-- Modal content--> 
    <div class="modal-content"> 
      <div class="modal-header"> 
        <!-- 添加data-dismiss="modal"让叉号可以关闭模态框 -->
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <h4 class="modal-title">Modal Header</h4> 
      </div> 
      <div class="modal-body"> 
        <p>Some text in the modal.</p> 
      </div> 
      <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
    </div> 
  </div> 
</div>

<script>
$(function() {
  $('#tos-checkbox').click(function() {
    // 用$(this)代替重复查找#tos-checkbox，更高效
    if ($(this).is(":checked")) {
      $('#tosmodal').modal('show');
    } else {
      $('#tosmodal').modal('hide');
    }
  });
});
</script>

关键修改说明 #

1. 调整脚本加载顺序：把jQuery放在Bootstrap JS之前，确保Bootstrap能正确依赖jQuery初始化组件。
2. 修复关闭按钮：给头部的×按钮添加data-dismiss="modal"属性，让它具备关闭模态框的功能。
3. 优化jQuery代码：在点击事件里使用$(this)指代当前触发事件的复选框，避免重复查询DOM，提升代码性能。

现在你测试一下，勾选复选框就能弹出模态框，取消勾选就会隐藏模态框，同时模态框的关闭按钮也能正常工作了。

内容的提问来源于stack exchange，提问作者muthukrishnan91