Question

我正在尝试使用bootstrap在您单击图像时添加模态，它应该弹出。单击图像时没有任何事情发生。

头

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">     </script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link href='https://fonts.googleapis.com/css?family=Crete+Round' rel='stylesheet' type='text/css'>
    <title>Jordan Schultz's Portfolio</title>
</head>

图片

<div class = "col-md-4"><img src = "http://loremflickr.com/300/200/soccer/all" class = "img-responsive center-block img-rounded data-toggle="modal" data-target="#project1""><h3 class = "text-center">Test</h3></div>

模态代码

<div class="modal fade" id="project1" 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="http://loremflickr.com/300/200/soccer/all">
    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>

Answer 1

以下是修正：https://jsfiddle.net/z4b2bwg6/18/

您尚未正确关闭img类的双引号。

<div class = "col-md-4">
<img src = "http://loremflickr.com/300/200/soccer/all" 
class = "img-responsive center-block img-rounded" 
data-toggle="modal" 
data-target="#project1">
<h3 class = "text-center">Test</h3></div>

使用bootstrap添加Modal，无法正常工作

1 个答案: