單擊時不顯示引導程序彈出窗口

<div id="freewall" class="freewall"> 
    <g:each in="${list}" var="image"> 
     <div class="brick"> 
      <div class="grid-tile"> 
       <a class="overlay" href="/more/${image.id}" data-toggle="modal" data-target="#detailModal"> 
       <img src="${image.referralImage}" width="100%" /> 
       </a> 

      </div> 

      <div class="info"> 
       <p class="title">${image.tags}</p> 
       <p class="owner">by ${image.description}</p> 
      </div> 
     </div> 
    </g:each> 
</div> 


<div id="detailModal" class="modal hide mod pure-g t-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     </div> 
     <div class="modal-body"> 
     <p>One fine body…</p> 
     </div> 

</div>

使用引導程序與動態圖像及其詳細信息。單擊時不顯示引導程序彈出窗口

起初，我用

$('#detailModal').modal('show');

的問題是，當頁面加載時，將detailModal當它不應該出現。

$('#detailModal').modal('hide'); 
    $('.grid-tile a').on('click', function(){ 
    $('#detailModal').modal('show'); 
});

頁面加載時，不顯示detailModal。但是當我點擊網格圖塊上的圖像彈出細節時，它不會執行任何操作，這意味着根本沒有彈出窗口。

我無法找到我可以忽略或出錯的地方。幫助讚賞！

來源

2014-02-21 kittymeows

我覺得你的網頁刷新後點擊鏈接。嘗試使用event.preventDefault()一樣，

$('.grid-tile a').on('click', function(e){ 
    e.preventDefault();// to prevent page refresh 
    $('#detailModal').modal('show'); 
});

希望，它的工作原理或五個代碼的在線演示。

來源

2014-02-21 05:06:08

我已經在我發佈求助之前做到了。它沒有工作 – kittymeows

你可以嘗試把對標籤類直接引用，與其電網所有權

也嘗試使用點擊功能，所以

$('#detailModal').modal('hide'); 
$('.newAnchorClassName').click(){ 
    $('#detailModal').modal('show'); 
};

最後檢查，看看是否有任何javascript錯誤被解僱了

來源

2014-02-21 05:14:23

我也使用.overlay類，但它也不起作用。沒有js錯誤 – kittymeows

單擊標籤後，模板上的隱藏類會在html標記中被刪除？如果是這樣，那麼詠歎調隱藏='真'也去？我認爲在過去我需要手動刪除這個 –

我調整了嘿嘿後，我得到了它的工作。非常感謝 – kittymeows

單擊時不顯示引導程序彈出窗口

回答

相關問題