Modal在我的代码中不起作用
[英]Modal doesn't work in my code
问题描述
I tried everything and checked it over and over again. 
我尝试了一切，一遍又一遍地检查。 But i still can't find what's wrong with my code. 但我仍然无法找到我的代码有什么问题。
I think the id of the img and the modal is right. 我认为img和模态的id是正确的。 And there is also nothing wrong with the head part.... 头部也没有问题......
Could you take a look of my code? 你能看看我的代码吗？ I'd really appreciate that. 我真的很感激。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Just a Portfolio</title> <link rel="stylesheet" href="css/bootstrap.css"> <link href='https://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="js/bootstrap.js"></script> <script type="text/javascript" src="js/jquery-2.1.4.min.js"> </script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6"> <img src="img/1.png" alt="heiheihei"> </div> <div class="col-md-6 text-right"> <h1 class="text-uppercase text-thin title-super">Weikang Zhang</h1> <h3>It's Now or Never.</h3> </div> </div> <div class="row"> <div class="col-md-12"> <img class="title-logo img-responsive" src="img/2.jpg" alt="stussy guy"> </div> </div> <div class="row"> <div class="col-md-12"> <h2 class="text-muted">Hello</h2> </div> </div> <div class="row"> <div class="col-md-4"> <img class="img-responsive" src="img/a.jpg" data-toggle="modal" data-target="#p1"> </div> <div class="col-md-4"> <img class="img-responsive" src="img/b.jpg"> </div> <div class="col-md-4"> <img class="img-responsive" src="img/c.jpg"> </div> </div> <div class="row"> <div class="col-md-4"> <h3 class="text-center">Man</h3> </div> <div class="col-md-4"> <h3 class="text-center">Book</h3> </div> <div class="col-md-4"> <h3 class="text-center">Woman</h3> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="p1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabel">Favorite App Page</h4> </div> <div class="modal-body"> <img class="img-responsive" src="images/a.jpeg"> This was my first project in this class. I learned a lot about HTML and CSS. </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </body> </html>
3 个解决方案
解决方案1
2 2016-01-05 05:18:38
problem is here; 问题在这里;
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery-2.1.4.min.js">
bootstrap is depended on jquery so load jquery before bootstrap.js bootstrap依赖于jquery，因此在bootstrap.js之前加载jquery
it should be 它应该是
<script type="text/javascript" src="js/jquery-2.1.4.min.js">
<script type="text/javascript" src="js/bootstrap.js">
解决方案2
1 已采纳 2016-01-05 05:17:10
Include the jquery js before bootstrap js. 在bootstrap js之前包含jquery js。 Then try. 然后试试。
解决方案3
1 2016-01-05 05:19:02
Apart from placing the source to jquery before bootstrap.js , you need to show the modal. 除了在bootstrap.js之前将源放置到jquery之外，您还需要显示模态。 This can be done by $('#modalId').modal('show') Just put this in your JS: 这可以通过$('#modalId').modal('show')完成$('#modalId').modal('show')把它放在你的JS中：
$(document).ready(function(){
$('#p1').modal('show');
});
Here is a Working Demo 这是一个工作演示
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.