Javascript 模态在Twitter boootstrap中不可见

我试图显示一个模式的图像点击与图像被点击，但它不工作

我在用户单击图像后使用

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

这段代码现在可能可以工作，因为我得到了一个错误：showmodel没有定义，但相同的代码在我的网站上工作。

---

请帮助查找问题。

首先在html正文的最顶端……直接在

标记之后，在任何内容之前

把你的模态…没有任何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>

然后在Jquery中……只需找到类

.galleryImg

的所有链接，或者以您想要的方式识别它们，然后应用一个单击处理程序……将图像传递到模式

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

这是菜单

更新

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

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

因为您要追加项目，所以它们是动态创建的，所以您需要在上使用

，而不是单击

但您还需要将其全部包装在一个

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

  });

$（文档）.ready（函数（）{
//Facebook登录功能运行/循环
函数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"]
对于（var i=0；i），您的小提琴有一些问题。首先，如果要将
onclick
处理程序放入，则需要将
onLoad
更改为一个“no wrap”选项。此外，请确保您的外部资源以“http://”开头，否则它们将与小提琴相关，例如“…”它不存在。另外，www.netdna.bootstrapcdn.com不是一个有效的域。去掉www.I更新了你问题中的提琴。请记住这一点：-）您已经在试图调用showModal的页面中包含了包含showModal函数的js？虽然Id指出了一个语法错误，但您也知道为什么不使用内置的数据切换来打开模式。这是使用Bootstrap@dunnless是的，我有，如果你看到小提琴，你就会看到它点击图片后，页面会消失，但没有模式出现，我的网站上也出现了同样的情况。你的问题还与在js之前加载css有关。我在JSIDdle上切换了外部依赖项，而不是添加引导模式。我只是添加了完整的引导库。然后在js之后加载引导css。请确保将此复制到您的主站点，首先加载Jquery，然后加载bootstrap.js，然后加载bootstrap.csshey kylek，感谢您付出了这么多的努力，但这件事现在仍然有效，这是原始的html:和js:函数testAPI在pageLoad上启动。我仍然看到黑色褪色的屏幕，没有模式。真的感谢我删除了“隐藏”类从主图像div和我现在得到的模式，但它来没有背景，例如：
      $('body').on('click', 'a.galleryImg', function (e) {
         e.preventDefault();
         var img = $(this).html();
         $('.modal-body').html(img);
     });

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

  });