当鼠标悬停在产品上时,我试图在我的网上商店上显示 Bootstrap Modal。我在网上搜索了一下,发现如下:
奥 git _a
我通过添加以下代码让它在 Fiddle 中工作:
$('#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
- Bootstrap :3.2.0
最佳答案
您的 JavaScript 代码在悬停时触发模式,它没有选择正确的元素:
jQuery('#basicModal')
在上面的行中,您选择了一个 id ===“basicModal”的元素,但在您的 html 中,id 等于 basicModal-<?php echo $_product->getID()?>
。两个 id 字符串必须匹配,或者您可以使用 jquery 通配符,例如 JQuery("[id^=basicModal]")
选择所有 id 以 basicModal 开头的元素。
这是使用通配符解决方案的代码的工作版本:http://jsfiddle.net/fcyafcgx/
关于php - 悬停时显示 Bootstrap 模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26420727/