Bootstrap Modal彈出窗口不顯示

我不知道我在做什麼錯誤。模態沒有出現，我不知道我做錯了什麼。我已經在jsfiddle中嘗試過了，當我加載網站時它仍然沒有出現。無論什麼幫助將不勝感激。Bootstrap Modal彈出窗口不顯示

<!DOCTYPE html> 
<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>YesICan</title> 
<meta name="description" content="Hello World"> 
<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> 

<script type="text/javascript"> 
$(window).load(function(){ 
    $('#myModal').modal('show'); 
}); 
</script> 

</head> 

<body> 

<header> 
    <div class="jumbotron"> 
     <div class="container"> 
      <h1>Hello World</h1> 
      <h3>Modals in Bootstrap</h3> 
     </div> 
    </div> 
</header> 

<div class="container"> 
<!--<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-1">Activate the button</button>--> 
    <div class="modal fade" id="myModal"> 
     <div class="modal-dialog modal-lg"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <h3 class="modal-title" style="text-align:center">Safety Warning</h3> 
       </div> 
       <div class="modal-body">  
        <p style="text-align:center"> Your computer use can be monitored by others! Consider using a public computer or a friend's computer. Please view more computer safety tips or escape to Google. Then more computer safety tips linked to a page with details about browser history, cache, search history, etc. and escape to Google linked to Google.</p> 
        <p style="text-align:center"> To learn more how to computer safety, click the following link: <br><a href="#">Safety Tips</a></br></p> 
        <!--Wording can be better just for the meantime--> 
        <p style="text-align:center"> If you are not safe, click the following link: <br><a href="http://www.google.com">Get Me Out of Here!</a></br></p> 
       </div> 

       <div class="modal-footer"> 
        <a href="" class="btn btn-default" class="btn pull-middle" data-dismiss="modal" class="pagination-centered">Close</a> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 


<footer> 
    <div class="container"> 
     <hr> 

     <p> 
      <small><a href="http://facebook.com/askorama">Like me</a> On facebook</small></p> 
     <p> <small><a href="http://twitter.com/wiredwiki">Ask whatever </a> On Twitter</small></p> 
     <p> <small><a href="http://youtube.com/wiredwiki">Subscribe me</a> On Youtube</small> 

     </p> 
    </div> <!-- end container --> 
</footer> 

<!-- Latest compiled and minified JavaScript --> 
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

來源

2015-04-04 Roberto Flores

您沒有在您的網站中包含JQuery庫 – Chanckjh 2015-04-04 22:30:40

-1

首先，你缺少的myModal DIV關閉div標籤。

然後你要確保你的jQuery庫全部加載完畢（bootstrap.js和jquery）。

來源

2015-04-04 22:30:49

請解釋downvote。 – 2015-04-04 22:58:50

我不知道我在做什麼錯。我已經完成了你們所說的我已經有的東西，但它仍然不起作用 – 2015-04-09 04:20:13

您需要包含引導JavaScript（和jQuery）JavaScript文件才能使其工作。

您可以從here

加載bootstrap.js而且可以發現here

來源

2015-04-04 22:30:56

我確實有那些Jquery庫 – 2015-04-09 03:24:24

我確實已經加載了這些庫。以下是我添加的內容，它沒有改變任何內容，並且出於某種原因，當我提出以下問題時未顯示： – 2015-04-09 03:31:55

如果你看一下控制檯，你會發現undefined is not a function的jQuery庫的一個列表。這是參考您在之前嘗試呼叫$之前jQuery被加載到<head>標記中。

$(window).load(function(){ 
    $('#myModal').modal('show'); 
});

然後你在頁面末尾有jQuery。如果您要將jQuery參考放在您的標籤上方，則應該很好。

注：

不產生巨大的變化，但它更接受有你的JavaScript加載頁面的底部。我發現調試或避免這種事情更容易。特別是當你依賴第三方庫，如jQuery。

，除非你真的需要等待圖像和這樣的網頁上加載，你應該使用$(document).ready()事件或上的差異清潔$(function() {});

更多信息，可以發現Here。

來源

2015-04-14 03:52:29 technicallyjosh

Bootstrap Modal彈出窗口不顯示

回答

相關問題