0

我正在尝试使用单击的图像在图像单击时显示模式，但它不起作用。

小提琴

用户单击图像后，我正在插入模态的内容

  $("#imageModal").html(modalHtml);
  $('#imageModal').modal('show');

此代码现在可能可以工作，因为我收到错误：未定义 showModal 但相同的代码正在我的网站上运行。请帮助查找问题。

4

1 回答 1

1

首先在您的 html 正文的最顶部....直接在<body>标记之后，在任何内容之前。

把你的模态......没有任何img，只是一个空的身体......

<div id="imageModal"  class="modal hide fade in">
<div class="modal-header"><a class="close" data-dismiss="modal">x</a>
  <h3>Select the area</h3>
</div>
<div class="modal-body"></div>
 <div class="modal-footer">
  <a href="#" class="btn btn-success">Men Topwear</a>
  <a href="#" class="btn btn-success">Men Bottowear</a>
  <a href="#" class="btn btn-success">Women Topwear</a>
  <a href="#" class="btn btn-success">Women Bottomwear</a><br>
  <a href="#" class="btn" data-dismiss="modal">Close</a>
 </div>

然后稍后在您的文档中，无论您想要图像...只需将它们包装在<a>标签中，并将模式框的名称应用于 href，并应用 data-toggle 属性...data-toggle="modal"

 <a class='galleryImg' href="#imageModal" data-toggle="modal">
      <img src="http://media.santabanta.com/gallery/global%20celebrities(f)/shakira/shakira-28-m.jpg" />
     </a>
 <a class='galleryImg' href="#imageModal" data-toggle="modal">
      <img src="http://media.santabanta.com/gal/event/ramaiya-vastavaiya-sp" />
     </a>

然后在您的 Jquery 中...只需找到所有带有 class 的链接.galleryImg，或者您想识别它们，然后应用单击处理程序...将图像传递给模态。

$('a.galleryImg').click(function (e) {
    e.preventDefault();
    var img = $(this).html();
    $('.modal-body').html(img);
});

这是JSFIDDLE 演示

更新

查看您粘贴的代码后......您不能那样做，因为您要在创建的项目上输出两个点击处理程序。你需要这样做......

function testAPI(){
listOfPage = ["http://media.santabanta.com/gallery/global%20celebrities(f)/shakira/shakira-28-m.jpg", "http://media.santabanta.com/gal/event/ramaiya-vastavaiya-special-screening/ramaiya-vastavaiya-special-screening-32.jpg"]
for (var i=0;i<listOfPage.length;i++){
     $("#imgbox").append('<a class="galleryImg" href="#imageModal" data-toggle="modal"><img src="'+listOfPage[i]+ '"></a>');
    }
}

然后将这个单独放在循环之外....

      $('body').on('click', 'a.galleryImg', function (e) {
         e.preventDefault();
         var img = $(this).html();
         $('.modal-body').html(img);
     });

因为由于您要附加项目，所以它们是动态创建的，因此您需要使用on而不是click

但是您还需要将其全部包装在 $(document).ready(function()...中

 $(document).ready(function(){


    //Facebook login function run/loop  
    function testAPI(){
      listOfPage = ["http://media.santabanta.com/gallery/global%20celebrities(f)/shakira/shakira-28-m.jpg", "http://media.santabanta.com/gal/event/ramaiya-vastavaiya-special-screening/ramaiya-vastavaiya-special-screening-32.jpg"]
     for (var i=0;i<listOfPage.length;i++){
       $("#imgbox").append('<a class="galleryImg" href="#imageModal" data-toggle="modal"><img src="'+listOfPage[i]+ '"></a>');
      }
    }


  //Apply click handler to dynamic links...
  $('body').on('click', 'a.galleryImg', function (e) {
     e.preventDefault();
     var img = $(this).html();
     $('.modal-body').html(img);
 });

  });
于 2013-08-30T09:54:19.253 回答