boostrap 弹出确认框（删除确认）

最新推荐文章于 2023-10-03 06:21:15 发布

原创最新推荐文章于 2023-10-03 06:21:15 发布 · 3.7k 阅读

5 ·

CC 4.0 BY-SA版权

前端框架boostrap 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用Bootstrap框架快速搭建一个删除操作的确认模态框，包含按钮触发、模态框样式及响应式设计，适用于网页应用中需要用户二次确认的删除操作场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

将以下代码拷贝到引入boostrap的页面上即可。

 <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">删除</button>
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="deleteModalLabel">确认框</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label  class="control-label">确定要删除吗？</label>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
                    <button type="button" class="btn btn-primary">确认</button>
                </div>
            </div>
        </div>
    </div>