php - 悬停时显示 Bootstrap 模式

Question

当鼠标悬停在产品上时，我试图在我的网上商店上显示 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

Answer 1

您的 JavaScript 代码在悬停时触发模式，它没有选择正确的元素:

jQuery('#basicModal')

在上面的行中，您选择了一个 id ===“basicModal”的元素，但在您的 html 中，id 等于 basicModal-<?php echo $_product->getID()?> 。两个 id 字符串必须匹配，或者您可以使用 jquery 通配符，例如 JQuery("[id^=basicModal]")选择所有 id 以 basicModal 开头的元素。

这是使用通配符解决方案的代码的工作版本:http://jsfiddle.net/fcyafcgx/