我有一个脚本,我需要能够从我的jQuery链接触发一个模态。当用户点击thumbnail
课程时,应显示全屏模式,其中包含更多信息。
我有以下内容,但坚持如何组织代码以便页面正常工作:
$(function(){
$.getJSON('url', function(data) {
for(var key in data.results) {
var poster = data.results[key].poster_path,
title = data.results[key].title,
description = data.results[key].overview;
if(data.results.hasOwnProperty(key)) {
$('<img class="col-lg-2 col-md-3 col-sm-3 col-xs-12 thumbnail">').attr({
src:'http://image.tmdb.org/t/p/w342' + poster
}).appendTo($('<a title=' + title + ' data-toggle='modal' data-target='#modal-fullscreen'/>').attr({
href:'http://image.tmdb.org/t/p/w342' + poster
}).appendTo($('.container')));
}
$('body').append("<div class="modal modal-fullscreen fade" id="modal-fullscreen" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">\
<div class="modal-dialog">\
<div class="modal-content">\
<div class="modal-header">\
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>\
<h4 class="modal-title" id="myModalLabel">Modal title</h4>\
</div>\
<div class="modal-body">\
<p>This is the title of the movie</p>\
</div>\
<div class="modal-footer">\
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>\
</div>\
</div>\
</div>\
</div>");
}
});
});
当模态位于当前位置时,页面根本不起作用。我还需要能够从数据源中获取数据,以填充模态窗口。
这是模态需要从以下位置获取信息的示例对象:
{
poster_path: "/e1mjopzAS2KNsvpbpahQ1a6SkSn.jpg",
overview: "details about movie",
release_date: "2016-08-03",
id: 297761,
original_title: "Title of movie",
original_language: "en",
title: "Title of movie",
popularity: 44.788935,
vote_count: 1552,
}