模态在Twitter boootstrap中不可见

Modal not visible in Twitter boootstrap

本文关键字：boootstrap Twitter 模态      更新时间：2023-09-26

我试图在图像点击时显示一个模态，但它不起作用。

小提琴

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

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

这段代码现在可能会工作，因为我收到了错误：showModal没有定义，但我的网站上也有相同的代码。请帮助查找问题。

首先在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类的所有链接，或者您想要识别它们的方式，然后应用单击处理程序。。。将图像传递给模态。

$('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);
 });
  });
相关文章：