Question

我有一个输入类型为“ CheckBox”的onclick函数，如果单击了该复选框，则会启动模式。但这不会启动模式吗？
我插入了一个警报（ID）；在if语句下，它确实会警告“ chkfb”，所以我知道结果是“ TRUE”，但是$（'＃Searchfb'）。modal（）;将无法正常工作。

在

的底部添加了脚本

 <!DOCTYPE html>
 <html lang="en" dir="ltr">

 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, 
       shrink-to-fit=no">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">

 <link rel="stylesheet" 
 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">

 <link rel="stylesheet"
    href="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> 

<script type="text/javascript" 
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> 
</script>
<script    
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
</script>

</head>
<body>
<script type="text/javascript">
  function myCheckBoxFunction(id) {
    var checkBox = document.getElementById(id);
    if (checkBox.checked == true) {
      $('#SearchFb').modal();
    } else {}
  }
</script>

<input id="chkFb" type="checkbox" onclick="myCheckBoxFunction(this.id);" /> 
  <label for="chkFb">&nbspFb Services</label>


<!-- Modal -->
<div class="modal fade" id="Searchfb" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <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 src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
   integrity="sha384- 
   q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
   crossorigin="anonymous"></script>

<script 
   src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/
   umd/popper.min.js" integrity="sha384- 
   UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 
   crossorigin="anonymous"></script>
<script 
   src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/
   js/bootstrap.min.js" integrity="sha384- 
   JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 
   crossorigin="anonymous"></script>

</body>

Answer 1

https://getbootstrap.com/docs/4.0/components/modal/#modalshow

$('#Searchfb').modal('show');

Answer 2

问题在于您的ID名称

  <div class="modal fade" id="Searchfb" role="dialog">

注意，脚本中的ID名称必须相同

    $('#SearchFb').modal('show');

因此只需要更改html或js代码中的fb或Fb。开心的代码！

脚本功能将不会打开模式

2 个答案: