Question

此代码适用于FireFox和IE，但不适用于Chrome。有什么想法吗？感谢帮助。 Chrome I使用的版本是版本53.0.2785.143 m。出于某种原因，Chrome并不喜欢被吸引的JS。我不知道挂断的地方。

  <!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>

Answer 1

data-toggle脚本使用data-target和bootstrap.min.js属性来显示/隐藏具有这些属性的元素时的模态。

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

要解决此问题，您可以添加一些javascript代码，以便在select的元素值更改时打开模式。这是一个例子：

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

这是一个包含所有代码的工作示例。

＆＃13;

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

＆＃13;

  <!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>

＆＃13;

Bootstrap JS无法在Chrome中运行

1 个答案: