下拉选择时弹出引导模式答案

【问题标题】：bootstrap modal pop up on dropdown select下拉选择时弹出引导模式
【发布时间】：2015-09-18 07:57:27
【问题描述】：

我有一个带有一些选项列表的选择下拉列表。单击一个选项时，我想显示一个引导模式弹出窗口。任何人都可以帮助我摆脱这个问题。

<select> 
<option> List 1 </otion>
<option> list 2</option>
<option> List 3</option>
<option data-toggle="modal" data-target="#myModal" > Click For Modal </option>
</select>

【问题讨论】：

bootstrap documentation 没有帮助吗？
为什么这个问题被标记为否定？我遇到的同样的问题是模态出现在 Firefox 中，但没有出现在 chrome 中

标签： bootstrap-modal

【解决方案1】：

你可以试试这个....

<!DOCTYPE html>
<html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <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 class="container">
          <h2>Basic Modal Example</h2>
          <!-- Trigger the modal with a button -->
                <select> 
                    <option> List 1 </otion>
                    <option> list 2</option>
                    <option> List 3</option>
                    <option  data-toggle="modal" data-target="#myModal"> Click For Modal </option>
                </select>
          <!-- Modal -->
              <div class="modal fade" id="myModal" 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>  
        </div>
    </body>
</html>

【讨论】：

此过程在 Firefox 中运行良好，但在 Chrome 中无法运行。我尝试了一些 J 查询也使用了更改功能，但仍然无法正常工作。你能帮我摆脱这种情况吗？