BootStrap模态框实现确认弹窗_bootstrap 确认框

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)
  1

实际使用的代码

• 加入模块

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

• 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"
1
2
3
4
5
6
7
8
9
10
11
12
13

• 模态框框体部分

<!-- 模态框（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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

• 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>
1
2
3
4
5
6
7
8
9
10
11
12
13

• 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();
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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