Bootsrap對話框不會顯示

-1

即時通訊嘗試使用Bootstrap創建一個簡單的彈出式登錄窗體。我下面這個教程： https://www.youtube.com/watch?v=HCEbp07hfLw
所以我嘗試做他用此代碼做：Bootsrap對話框不會顯示

<!DOCTYPE html> 
<html> 
<head> 
    <title>kaki</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/> 
<script  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> 
<script type="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">  </script> 
</head> 
<body> 

<div class="modal" id="myModal" aria-hidden="true"> 

<div class="modal-header"> 
    <h3>Poop and Kaki Login</h3> 
</div> 
<div class="modal-body"> 
    <form> 
     <label>Email</label> 
     <input type="email" class="span4"/><br/> 
     <label>Password</label> 
     <input type="password" class="span4"><br/><br/> 
     <button type="submit" class="btn btn-success">Log In</button> 
     <button type="reset" class="btn">Clear</button> 
    </form> 
</div> 
<div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
</div>

當我運行代碼什麼都沒有顯示出來.. 沒有。有什麼幫助嗎？

來源

2015-06-05 Ron

你需要在* Bootstrap的JS之前包含jQuery *。您是否檢查瀏覽器控制檯中的錯誤？ – j08691

我只是嘗試了jQuery引導之前它沒有做任何事情......控制檯中寫道：未捕獲的錯誤：引導的JavaScript需要jQuery的 – Ron

聽起來像你jQuery是不正確加載 –

下面是引導工作模式的一個例子：http://jsfiddle.net/chapmanc/d518cdwt/1/ 啓動演示模式

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <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>

一個問題是你正在使用一個引導版本，它需要包含1.7.1的jQuery的最低版本1.9.1。

另一個問題是，情態動詞默認隱藏，你從來沒有真正啓動模式。如果你看看我從文檔中鏈接的例子，你會看到一個按鈕來啓動模式。

我的建議是經常閱讀的您正在尋找成什麼樣的文檔（文檔的一些人比其他人更好，但自舉的非常好）。你也應該熟悉瀏覽器調試工具，特別是控制檯。我更喜歡Chrome，https://developer.chrome.com/devtools。

來源

2015-06-05 17:01:08 chapman84

謝謝！這對我有用:) – Ron

引導模態不會自動地打開。您應該只使用不引人注目的JS作爲documentation提到觸發模式窗口：

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

來源

2015-06-05 16:38:17

我試過了，我仍然有同樣的結果..按觸發按鈕什麼都不做 – Ron

請創建一個示例，以便人們可以看看它。 –

Bootsrap對話框不會顯示

回答

相關問題