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弹出窗口不显示

回答

相关问题