莫代爾在Twitter中看不到boootstrap

我正在嘗試在圖片上顯示一個模式，點擊圖片點擊，但它不工作。莫代爾在Twitter中看不到boootstrap

我插入模式的用戶後的內容點擊使用

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

此代碼可能現在的工作，因爲我得到的錯誤形象：沒有定義的ShowModal，但相同的代碼正在我的網站上工作。請幫忙找到問題。

來源

2013-08-30 scottydelta

你的小提琴有一些問題。首先，如果你打算使用'onclick'處理程序，你需要將'onLoad'改爲其中一個「no wrap」選項。另外，請確保您的外部資源以「http：//」開頭，否則它們會變成相對於小提琴，例如「http://fiddle.jshell.net/ut2Ab/4/show/light/netdna.bootstrapcdn.com/ ...「不存在。此外，www.netdna.bootstrapcdn.com不是有效的域名。擺脫www。我在你的問題中更新了小提琴。請記住這一點:-) – FakeRainBrigand

並且您已在您嘗試調用showModal的頁面中包含包含showModal函數的js？ –

只是想Id指出一個語法錯誤，你有 KyleK

首先在您的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 DEMO

UPDATE

查看代碼後，你粘貼....你不能那樣做，因爲你是輸出上創建項目兩個click處理程序，。你需要做的是這樣的... ...

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

然後sepereately有這樣的循環之外....

 $('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-30 09:54:19 KyleK

你的問題也與在js之前加載css有關。我在JsFiddle上切換了外部依賴關係，而不是添加bootstrap-modal。我只是添加了完整的引導庫。然後在JS之後引導CSS。確保如果你複製這個到你的主站點，你有jquery加載第一，然後bootstrap.js，然後bootstrap.css – KyleK

嘿kylek，感謝您付出了很多努力，但這件事仍在工作，這裏是原始html：http://paste.ofcode.org/33AQEw9dZvc7M6Hxmytq92V和js：http://paste.ofcode.org/RRaSMpp7572n9xQwjPWi4X 函數testAPI在pageLoad上觸發。我仍然變得黑色褪色的屏幕和沒有模態。真的非常感謝 – scottydelta

我從主圖像div中刪除了「隱藏」類，現在我得到的是模態，但它沒有bg即將到來，例如：http://pastemehere.com/e0gxxpre – scottydelta

莫代爾在Twitter中看不到boootstrap

回答

相關問題