Question

当鼠标悬停在产品上时，我正试图在我的网上商店显示Bootstrap模式。我在网上搜索并发现以下内容：
https://stackoverflow.com/a/12190456/3164891

我通过添加以下代码让它在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
    });
});

当我在我的网站上尝试时，模式仅显示单击一个href时，并且在悬停时不执行任何操作。我也尝试过以下代码：

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

我使用以下版本：

jQuery：1.10.2.min
Bootstrap：3.2.0

Answer 1

你在悬停时触发模态的javascript代码，它没有选择正确的元素：

jQuery('#basicModal')

在上面一行中，您选择的元素ID为===＆＃34; basicModal＆＃34;，但在您的html中，id等于basicModal-<?php echo $_product->getID()?>。两个id字符串必须匹配，或者你可以使用jquery通配符，比如JQuery("[id^=basicModal]")选择所有id为sarting with basicModal的元素。

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

在悬停时显示Bootstrap模态

1 个答案: