无法在jQuery中显示链接的模态

时间:2016-09-01 03:07:15

标签: javascript jquery twitter-bootstrap

我有一个脚本,我需要能够从我的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">&times;</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,
}

0 个答案:

没有答案