在悬停上显示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模式

回答

相关问题