使用引導程序添加模態，不起作用

我嘗試使用引導程序在單擊圖像時添加模式，它應該彈出。點擊圖片時沒有任何事情發生。使用引導程序添加模態，不起作用

頭

<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>

來源

2015-10-19 Jordan Schultz

如果這是您的實際代碼，那麼至少您已經對標記中的引號進行了修改。 – beercodebeer

數據目標=「＃PROJECT1」」似乎有額外的雙引號？ –

這裏是修復：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>

來源

2015-10-19 19:49:16

謝謝你，我明白我現在做錯了。 –

我只是固定它在我的代碼，但該模式仍然不會在我結束彈出我檢查了您的jsfiddle和它似乎是雖然工作。 –

你更正數據目標=「＃PROJECT1」？這似乎已經在你的代碼兩個雙引號。 –

使用引導程序添加模態，不起作用

回答

相關問題