BootStrap模态框实现确认弹窗

最新推荐文章于 2026-05-13 09:06:31 发布

原创最新推荐文章于 2026-05-13 09:06:31 发布 · 2.6k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了使用BootStrap模态框实现确认弹窗的方法。模态框是覆盖在父窗体上的子窗体，可提供信息与交互。文中说明了通过data属性和JavaScript两种方式切换模态框隐藏内容，还给出了实际使用代码，不过页面刷新问题尚未解决。

BootStrap模态框实现确认弹窗

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

https://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

文档使用介绍

用法

您可以切换模态框（Modal）插件的隐藏内容：
通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle=“modal”，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id=“identifier”）。
通过 JavaScript

：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id=“identifier” 的模态框：
$('#identifier').modal(options)

实际使用的代码

加入模块

    <script type="text/javascript">
        $('#myModal').on('shown.bs.modal', function () {
            $('#myInput').focus()
        });
    </script>

a标签触发模态框

cell.innerHTML = "<div class='btn'>\n" +
"                        <div class='btn-group'>\n" +
"                           <a href='/toIncreaseInventory?bookID="+ data[i].bookID +"'>" +
"                               <i class='ion-plus-round'></i>\n" +
"                           </a>\n" +
"                        </div>\n" +
"                        <span> | </span>" +
"                        <div class='btn-group'>\n" +
"                           <a data-toggle='modal' data-target='#myModal' οnclick='Value("+ data[i].bookID +")'>" +
"                               <i class='ion-trash-a'></i>\n" +
"                           </a>\n" +
"                        </div>\n" +
"             </div>\n"

模态框框体部分

<!-- 模态框（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">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">提 示</h4>
                </div>
                <div class="modal-body">是否删除该书籍？</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <input type="hidden" id="isDeleteBook">
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="isDelete()">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

a标签中οnclick=Value( ) & 模体框中 οnclick="isDelete() 触发事件

 <script type="text/javascript">
        function Value(bookID) {
            let element = document.getElementById('isDeleteBook');
            element.value = bookID;
        }

        function isDelete() {
            let bookId = document.getElementById('isDeleteBook').value;
            $.post("/deleteBooks?bookID="+bookId,function (data){
				<!-- \\\ -->
            })
        }
    </script>

Controller层代码

    @PostMapping("/deleteBooks")
    @ResponseBody
    public void deleteBooks(Integer bookID, HttpServletRequest request ,HttpServletResponse response) {
        System.out.println("进入了deleteBooks方法==》bookID=" + bookID);
        int i = booksService.deleteBookByID(bookID);
        if (i > 0) {
            System.out.println("deleteBooks===>删除成功。");
        }
        try {
            request.getRequestDispatcher("/toBookTable").forward(request, response);
        } catch (ServletException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

页面如何刷新问题尚未解决