Boostrap燈箱不按預期方式工作

我試圖使用'bootply.com/'中的代碼在我的頁面上使用功能燈箱，但似乎不起作用。它作爲一個鏈接工作，但不是作爲一個燈箱。我收到一個錯誤，其中聲明'$未定義'的Javascript，但我似乎無法找到問題。我只是複製代碼，所以不知道我錯過了什麼！Boostrap燈箱不按預期方式工作

<script type="text/JavaScript"> 
$('.thumbnail').click(function(){ 
    $('.modal-body').empty(); 
    var title = $(this).parent('a').attr("title"); 
    $('.modal-title').html(title); 
    $($(this).parents('div').html()).appendTo('.modal-body'); 
    $('#myModal').modal({show:true}); 
});

http://www.bootply.com/71401

任何幫助表示讚賞。

來源

2015-04-27 James B

您需要將jQuery庫包含到您的HTML中。 Bootstrap JavaScript庫取決於它afaik，你在腳本中使用它。'$（'DomElement'）' – Pogrindis

你必須包含jQuery。

，如果您有jQuery的LIB然後

<script src="jquery-1.11.2.min.js"></script>

或

使用jQuery CDN

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

來源

2015-04-27 12:59:18

你缺少jQuery庫..

Includ E本在你的HTML的頂部之前，您嘗試使用$

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

另外，您也可以下載jQuery庫和自己引用它。

這應該可以解決問題。

來源

2015-04-27 12:59:32 Pogrindis

很好，謝謝你。它不會再在控制檯中引發錯誤，但圖像仍然在新窗口中打開，而不是在Lightbox中打開。我已經複製了確切的代碼，所以不知道爲什麼？我是否需要包含其他內容？ –

@JamesPardigan林不知道我從你的代碼的外觀，你使用的是模態而不是ligthbox ..看看這裏的例子：http://ashleydw.github.io/lightbox/#image-gallery – Pogrindis

Boostrap燈箱不按預期方式工作

回答

相關問題