Question

我有一个打开模态的按钮，按钮位于背景图像上，我必须将照片作为按钮。

我有这个HTML：

<div id="cih1" class="cuadro_intro_hover">
        <img class="lazy" data-original="img/products/001.jpg" alt="">
    <div id="cihc1" class="caption">
        <div id="cihb1" class="blur">
        </div>
        <div class="caption-text">
            <img class="" src="img/maieu.png" alt="" style="width: 114px; height: 140;">
            <h3>Golden Fish</h3>
            <p>Price: 100Lei</p>
            <a href="#Modal1" class="btn btn-primary portfolio-link" data-toggle="modal"><span>Info</span></a>
        </div>

    </div>
</div>

...这是打开模态的按钮：

<a href="#Modal1" class="btn btn-primary portfolio-link" data-toggle="modal"><span>Info</span></a>

我必须采取行动，但没有手形鼠标光标。

感谢。

Answer 1

如果我正确地理解了你的问题，这应该可以解决问题：

$('img').on(
    'click',
    function () {
        $('.portfolio-link').click();
    }
)

您可能应该在img标记中添加一些特殊的类或ID。

Answer 2

它的格式应该是这样的（因为它不是真正的链接）

<button type="button" class="btn btn-primary  portfolio-link" data-toggle="modal" data-target="#Modal1">
  Info
</button>

或者你可以包裹整个区域。

<div id="cih1" class="cuadro_intro_hover" data-target="#Modal1">
        <img class="lazy" data-original="img/products/001.jpg" alt="">
    <div id="cihc1" class="caption">
        <div id="cihb1" class="blur">
        </div>
        <div class="caption-text">
            <img class="" src="img/maieu.png" alt="" style="width: 114px; height: 140;">
            <h3>Golden Fish</h3>
            <p>Price: 100Lei</p>
            <a href="#" class="btn btn-primary portfolio-link"><span>Info</span></a>
        </div>

    </div>
</div>

很难在没有看到你的模态代码的情况下特别准确地回答这个问题。

Answer 3

你的问题不是很明确（我必须采取行动，但没有手形鼠标光标？），但为什么你不只是将图像包含在模态链接中？另外，您需要使用data-target =“＃Modal1”，而不是使用href。

 <a href="#" class="btn btn-primary portfolio-link" data-target="#Modal1" data-toggle="modal">
 <img class="" src="img/maieu.png" alt="" style="width: 114px; height: 140;"></a>

点击背景<img/>打开模态

3 个答案: