在悬停时显示引导模式答案

【问题标题】：Show Bootstrap modal on hover在悬停时显示引导模式
【发布时间】：2014-10-17 08:15:29
【问题描述】：

当鼠标悬停在产品上时，我试图在我的网上商店中显示引导模式。我在网上搜索了一下，发现如下：
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
    });
});

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

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

我正在使用以下版本：

jQuery：1.10.2.min
引导程序：3.2.0

【问题讨论】：

你能发个小提琴吗？
看起来您正在尝试模态 id="basicModal" 但您正在向其添加 id。
尝试jQuery('.modal')而不是jQuery('#basicModal')，要使用这种方法，只需确保页面中没有多个模式。
我已经尝试过了，但觉得奇怪的是' $("#mymodal").modal("show") '没有在鼠标悬停或任何悬停事件时触发。我建议，去@987654322 @

标签： php jquery twitter-bootstrap magento twitter-bootstrap-3

【解决方案1】：

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

jQuery('#basicModal')

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

这是您的代码的工作版本，带有通配符解决方案：http://jsfiddle.net/fcyafcgx/

【讨论】：