Bootstrap JS不会在Chrome中工作

此代码适用于FireFox和IE，但不适用于Chrome。任何想法为什么？帮助表示赞赏。我使用的Chrome版本为版本53.0.2785.143米。出于某种原因，Chrome并不喜欢被拉入的JS。我不确定挂断的位置。Bootstrap JS不会在Chrome中工作

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
</head> 
    <body> 
    <div style="width:100px;"> 
      <select> 
       <option>Select a language</option> 
       <option data-toggle="modal" data-target="#myModal">English</option> 
       <option data-toggle="modal" data-target="#myModal2">Spanish</option> 
      </select> 
     <!-- Modals --> 
     <!-- English Modal --> 
      <div class="modal fade" id="myModal" role="dialog"> 
      <div class="modal-dialog">  
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal">&times;</button> 
         <h4 class="modal-title">English content</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> 
     <!-- End English Modal -->    
     <!-- Spanish Modal -->    
      <div class="modal fade" id="myModal2" 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">Spanish content</h4> 
        </div> 
        <div class="modal-body"> 
         <p>Some text in the modal2222.</p> 
        </div> 
        <div class="modal-footer"> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        </div> 
       </div>   
      </div> 
      </div> 
     <!-- End Spanish Modal --> 
    </div> 
    </body> 
    </html>

来源

2016-10-05 bmyers

的data-toggle和data-target属性用于由bootstrap.min.js脚本来显示/隐藏模态被点击与这些属性的元素时。

在这种情况下，似乎在Chrome中未触发必要的点击事件（很可能是因为您已使用option元素）。

要修复这个问题，可以在select的元素值发生变化时添加一些javascript代码来打开模式。这里是一个例子：

<script type="text/javascript"> 
    $(function(){ 
    $("select").change(function(){ 
     if(this.value == "English"){ 
     $("#myModal").modal("show"); 
     }else if(this.value == "Spanish"){ 
     $("#myModal2").modal("show"); 
     } 
    }); 
    }); 
</script>

这里是一个工作的例子，所有的代码。

$(function(){ 
 
     $("select").change(function(){ 
 
      if(this.value == "English"){ 
 
      $("#myModal").modal("show"); 
 
      }else if(this.value == "Spanish"){ 
 
      $("#myModal2").modal("show"); 
 
      } 
 
     }); 
 
     });

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
</head> 
 
    <body> 
 
    <div style="width:100px;"> 
 
      <select> 
 
       <option>Select a language</option> 
 
       <option data-toggle="modal" data-target="#myModal">English</option> 
 
       <option data-toggle="modal" data-target="#myModal2">Spanish</option> 
 
      </select> 
 
     <!-- Modals --> 
 
     <!-- English Modal --> 
 
      <div class="modal fade" id="myModal" role="dialog"> 
 
      <div class="modal-dialog">  
 
       <div class="modal-content"> 
 
        <div class="modal-header"> 
 
         <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
         <h4 class="modal-title">English content</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> 
 
     <!-- End English Modal -->    
 
     <!-- Spanish Modal -->    
 
      <div class="modal fade" id="myModal2" 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">Spanish content</h4> 
 
        </div> 
 
        <div class="modal-body"> 
 
         <p>Some text in the modal2222.</p> 
 
        </div> 
 
        <div class="modal-footer"> 
 
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
        </div> 
 
       </div>   
 
      </div> 
 
      </div> 
 
     <!-- End Spanish Modal --> 
 
    </div> 
 
    </body> 
 
    </html>

来源

2016-10-05 01:03:54 Titus

Bootstrap JS不会在Chrome中工作

回答

相关问题