Bootstrap JSはChromeで動作しません

このコードはFireFoxとIEでは動作しますが、Chromeでは動作しません。なぜどんなアイデア？ヘルプは高く評価されます。私が使用しているChromeのバージョンはバージョン53.0.2785.143 mです。何らかの理由で、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で動作しません

答えて

関連する問題