Question

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

我在用户点击图片

后插入模态内容

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

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

Answer 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="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中...只需找到类.galleryImg的所有链接，或者你想要识别它们，并应用一个点击处理程序......将图像传递给模态。 / p>

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

继承人JSFIDDLE DEMO

<强>更新

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

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);
 });

  });

模态在Twitter引导程序中不可见

1 个答案: