BootStrap模态框实现确认弹窗
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
/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">×</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")@ResponseBodypublic 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();}}
页面如何刷新问题尚未解决
