bootstrap-模态框-弹出图片

最新推荐文章于 2025-09-19 09:39:25 发布

原创最新推荐文章于 2025-09-19 09:39:25 发布 · 1.1w 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一种使用模态框展示图片的方法。通过一个按钮触发模态框，并在模态框中全尺寸显示图片，同时提供了关闭按钮方便用户操作。

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

            </div>
            <div class="modal-body">
                <img src="/402932167988559583.jpg" alt="" style="width:100%;">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->