在懸停上顯示Bootstrap模式

我試圖在鼠標懸停在產品上時在我的網上商店顯示Bootstrap模式。我在網上搜索，發現如下：
https://stackoverflow.com/a/12190456/3164891

我把它通過添加以下代碼在小提琴的工作：在懸停上顯示Bootstrap模式

$('#openBtn').hover(function() { 
    $('#modal-content').modal({ 
     show: true 
    }); 
});

但是，當我想將它應用到我的情況我不能得到它的工作
HTML

<li class="item"> 
    <a href="#" data-toggle="modal" data-trigger="hover" data-target="#basicModal-<?php echo $_product->getId()?>" class="product-image" id="<?php echo $_product->getId() ?>"> 
     <img id="product-collection-image-<?php echo $_product->getId(); ?>" src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize($_imgSize); ?>" /> 
    </a> 
</li> 

<div class="modal fade" id="basicModal-<?php echo $_product->getID()?>" role="dialog" aria-hidden="true" data-trigger="hover"> 
    <div class="modal-content"> 
     Modal Content 
    </div> 
</div>

調用模式

jQuery('.item').hover(function() { 
    jQuery('#basicModal').modal({ 
     show: true 
    }); 
});

當我嘗試它在我的網站的模式只被點擊並執行懸停沒事A HREF時表示。我也嘗試下面的代碼：

jQuery('#basicModal').modal({trigger: "hover"});

我使用以下版本：

的jQuery：1.10.2.min
引導：3.2.0

來源

2014-10-17 user3164891

你可以發佈一個小提琴？ – artm 2014-10-17 08:18:56

它看起來像你試圖模式'ID =「basicModal」'，但你正在添加ID。 – artm 2014-10-17 08:21:30

嘗試'jQuery（'。modal'）'而不是'jQuery（'＃basicModal'）'，要使用這種方法，只要確保在頁面中沒有多個模態。 – 2014-10-17 08:34:31

您的JavaScript代碼，正在激發模式懸停，它不選擇正確的元素：

jQuery('#basicModal')

在上面的行中，您選擇了id爲===「basicModal」的元素，但在您的html中，id等於basicModal-<?php echo $_product->getID()?>。這兩個id字符串必須匹配，或者您可以使用jquery通配符，如JQuery("[id^=basicModal]")，該選項用basicModal選擇所有具有id sarting的元素。

這裏是你的代碼與通配符解決方案的工作版本：http://jsfiddle.net/fcyafcgx/

來源

2014-10-17 09:18:26 gere

在懸停上顯示Bootstrap模式

回答

相關問題