Question

以下是我写的方式。请让我知道我搞砸了。

<img class="img-responsive" src="http://via.placeholder.com/380x300" alt="Appify image" data-toggle="modal" data-taget="#appify">

<div class="modal fade" id="appify" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="appify">APPIFY</h4>
            </div>
            <div class="modal-body">
                <img class="img-responsive" src="http://via.placeholder.com/380x300">
                This is Appify, biatch!
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>

Answer 1

您data-target标记上的拼写错误img。您的版本为data-taget="#appify">，但应为data-target="#appify">。

整个标签： <img class="img-responsive" src="http://via.placeholder.com/380x300" alt="Appify image" data-toggle="modal" data-target="#appify">

这是一个工作小提琴： https://jsfiddle.net/gx00gswh/

我尝试使用Bootstrap通过单击图像来实现模态，但它不起作用

1 个答案: