文章目录
以往课设记录
-
Web期末课程设计v1.0(一) | 大学生闲置物品交易系统 | 选择页面模板(附资源),使用 JQuery AJAX实现注册、登陆
-
Web期末课程设计v1.0(二) | 闲优购 | 使用Bootstrap5各组件优化页面,使用AJAX请求实现用户修改信息功能
-
Web期末课程设计v1.0(三) | 闲优购系统 | 基于Bootstrap设计商品页面、使用JQuery实现上传文件并显示到图片组件、使用JSTL标签显示数据库的内容到无序列表
-
Web期末课程设计v1.0(四) | 闲优购系统 | 实现JQuery图片上传 | 使用JQ插件提交AJAX请求实现发布商品并保存到数据库 | 商品分类分页显示
运行环境
- windows10
- IDEA专业版
- JDK8
- HTML5、CSS3、JavaScript
- JQuery
- Bootstrap5
1. 页面效果展示
1.1 显示当前位置
1.2 购买商品时候的询问窗口
确认购买后
1.3 显示浏览记录
2. 功能实现
2.1 使用Boostrap5框架的Modal实现确认购买后的弹出的窗口
Bootstrap5 modal 官方文档
关于modal组件的使用:
- 一个button按钮组件负责启动一个modal模态框
在按钮中需要设置这几个参数
参数名称 | 描述 |
---|---|
data-bs-toggle=modal | 用于指定按钮的目标为一个modal模态框 |
data-bs-target = #… | 用于指定当前按钮绑定的模态框组件的ID |
- 一个div负责显示modal模态框的内容,模态框所需的参数参考官方代码,除了id外,笔者未作修改
jsp
<!-- Button trigger modal -->
<button id="bt-buy" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop" hidden>
modal组件
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-danger" id="staticBackdropLabel">
<i class="bi bi-exclamation-triangle-fill"></i>
温馨提示
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
是否确认购买?
</div>
<div class="modal-footer">
<button id="btn-buy-cancel" type="button" class="btn btn-danger" data-bs-dismiss="modal">我再想想</button>
<button id="btn-buy-ok" type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modal-buy-ok">确认购买</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="modal-buy-ok" tabindex<