Bootstrap模式沒有顯示在點擊

當我嘗試在Bootstrap中加載一個模式時，它顯示當我刷新頁面，但是當我點擊按鈕時不顯示。我希望我的模式只在用戶點擊按鈕時彈出。Bootstrap模式沒有顯示在點擊

我HTML文件設置如下：

<head> 
    <meta charset="utf-8"> 
    <title>my title here</title> 
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css"> 
    <script src="/static/js/jquery-3.2.1.min.js"></script> 
    <script src="/static/js/popper.min.js"></script> 
    <script src="/static/js/bootstrap.min.js"></script> 
    <script src="/static/Highcharts-5.0.14/code/highcharts.js"></script> 
    <script src="/static/Highcharts-5.0.14/code/modules/exporting.js"></script> 
    <!-- Our Custom CSS --> 
    <link rel="stylesheet" href="/static/css/style_charts_black.css"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
</head>

我已經複製從引導教程網站驗證碼：

<!-- Button trigger modal --> 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" style="float:right; margin-right:100px"> 
Launch demo modal 
</button> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h5 class="modal-title" id="myModalLabel">Modal title</h5> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
</div> 

<script>$('#myModal').modal('show')</script>

我沒有得到在任何jQuery的錯誤JavaScript控制檯。我也嘗試將上面的最後一行更改爲.modal（'toggle'），但它沒有幫助。

來源

2017-10-09 Joss

不需要使用** $（'＃myModal'）。modal（'show'）** – LSKhan

** **此按鈕**切換** **目標**元素與** ID =＃myModal ** – LSKhan

您的代碼沒問題，您需要在<body>標記中包含js文件，而不是頭部。

從他們的文檔：

的結束標記前添加我們的JavaScript插件，jQuery和繫繩接近頁面的末尾。

這裏就是我發現，信息的鏈接：

https://v4-alpha.getbootstrap.com/getting-started/introduction/

而且js文件的codepen包含在身體和你的代碼工作正常：

https://codepen.io/egerrard/pen/MEGgJE

來源

2017-10-09 17:54:22

您的代碼正常工作，如果您只希望在單擊按鈕時激活模式，則不需要腳本

$（ '＃myModal'）模態（ '秀'）

<head> 
 
    <meta charset="utf-8"> 
 
    <title>GSMA Intelligence &mdash; Visuals</title> 
 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 

 
    <!-- Latest compiled and minified JavaScript --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
</head> 
 

 
<!-- Button trigger modal --> 
 
<!-- Button trigger modal --> 
 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
 
    Launch demo modal 
 
</button> 
 

 
<!-- Modal --> 
 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     ... 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-10-09 18:04:01

非常感謝，這對我有效。 – Joss

只需刪除數據切換HTML標記和寫

$('#myModal').modal('show') 
 
or 
 
$('#myModal').modal('toggle')

來源

2017-10-10 08:49:33

Bootstrap模式沒有顯示在點擊

回答

相關問題