bootstrap——模态框
2024-04-03 15:42:37
目录
模态框 类似js中alert();
1.模态框的主样式：modal
2.模态框的代码最好是直接作为body的子元素，而不是后代元素
3.模态框的区域：
4.与Bootstrap.js中的相关属性
5.Bootstrap.css
模态框的实现流程
案例：订单页面
模态框 类似js中alert();
1.模态框的主样式：modal
2.模态框的代码最好是直接作为body的子元素，而不是后代元素
3.模态框的区域：
（1）modal声明层 div.modal
（2）modal-dialog窗口声明层 div.modal-dialog
（3）modal-content 内容声明层 div.modal-conetnt
modal-header 头部
modal-body 身体
modal-foot 尾部
4.与Bootstrap.js中的相关属性
data-backdrop = "false" 控制模态框的遮罩层点击不关闭模态框
data-keyboard = "true" 控制模态框按键盘的esc键关闭
data-dismiss="modal" 控制模态框手动点击关闭
5.Bootstrap.css
fade 淡入淡出
模态框的实现流程
1.有按钮
data-toggle 识别该按钮控制模态框
data-target 通过锚链接的设计找到指定的模态框
2.有模态框的布局代码
案例：订单页面
<!DOCTYPE html>
<html><head><meta charset="utf-8"><!-- 支持手机端 --><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title></title><!-- css --><link rel="stylesheet" type="text/css" href="css/bootstrap.css" /><!-- js --><script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script><style type="text/css">.navbar-collapse {flex-grow: 0;}.form-group {width: 280px;margin: 0 auto;}/* 设置表格字体垂直居中 */.table tr td{vertical-align: middle;text-align: center;}</style></head><body><!-- 设计一个模态框实现订单页面 --><!-- Modal --><div class="modal fade" id="orderModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"><div class="modal-dialog modal-lg" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLongTitle">结算页</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="modal-body"><form><div class="form-row"><div class="form-group col-md-6"><label for="inputEmail4">Email</label><input type="email" class="form-control" id="inputEmail4" placeholder="Email"></div><div class="form-group col-md-6"><label for="inputPassword4">Password</label><input type="password" class="form-control" id="inputPassword4" placeholder="Password"></div></div><div class="form-group"><label for="inputAddress">Address</label><input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"></div><div class="form-group"><label for="inputAddress2">Address 2</label><input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor"></div><div class="form-row"><div class="form-group col-md-6"><label for="inputCity">City</label><input type="text" class="form-control" id="inputCity"></div><div class="form-group col-md-4"><label for="inputState">State</label><select id="inputState" class="form-control"><option selected>Choose...</option><option>...</option></select></div><div class="form-group col-md-2"><label for="inputZip">Zip</label><input type="text" class="form-control" id="inputZip"></div></div><div class="form-group"><div class="form-check"><input class="form-check-input" type="checkbox" id="gridCheck"><label class="form-check-label" for="gridCheck">Check me out</label></div></div><button type="submit" class="btn btn-primary">Sign in</button></form></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">确认订单</button></div></div></div></div><!-- 导航条的设置 --><nav class="navbar navbar-expand-lg navbar-light bg-light"><!-- 固定容器 --><div class="container"><a class="navbar-brand" href="#">您好！欢迎来到屌丝商城</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNavAltMarkup"><div class="navbar-nav"><a class="nav-item nav-link active" href="#">首页 <span class="sr-only">(current)</span></a><a class="nav-item nav-link" href="#">注册</a><a class="nav-item nav-link" href="#">登录</a><a class="nav-item nav-link disabled" href="#">我的购物车</a></div></div></div></nav><!-- 利用栅格系统实现搜索区域，左侧列表，轮播图，热门书籍 --><div class="container"><!-- 第一行 row start--><div class="row" style="margin-top: 10px;"><div class="col"><div class="jumbotron"><!-- 表单组件 --><form action="" method="post"><div class="form-group"><!-- 输入框组 --><div class="input-group mb-3"><input type="text" class="form-control" placeholder="书籍名"aria-label="Recipient's username" aria-describedby="button-addon2"><div class="input-group-append"><button class="btn btn-primary" type="button" id="button-addon2">搜索</button></div></div></div></form></div></div></div><!-- 第一行row end --><!-- 第二行 左3右9 --><div class="row"><div class="col-md-3 col-12"><!-- 列表组的核心样式 list-group --><div class="accordion" id="accordionExample"><div class="card"><div class="card-header" id="headingOne"><h5 style="cursor: pointer;" class="mb-0 " data-toggle="collapse"data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">书籍分类</h5></div><div id="collapseOne" class="collapse show" aria-labelledby="headingOne"data-parent="#accordionExample"><div class="list-group"><button type="button" class="list-group-item list-group-item-action ">爱情</button><button type="button" class="list-group-item list-group-item-action">恐怖</button><button type="button"class="list-group-item list-group-item-action active">悬疑</button><button type="button" class="list-group-item list-group-item-action">修鬼</button><button type="button" class="list-group-item list-group-item-action">修鬼</button><button type="button" class="list-group-item list-group-item-action">修鬼</button><button type="button" class="list-group-item list-group-item-action">修鬼</button><button type="button" class="list-group-item list-group-item-action">修鬼</button><button type="button" class="list-group-item list-group-item-action"disabled>穿越</button></div></div></div></div><!-- ---------------------------- --></div><div class="col-md-9 col-12"><!-- 购物车 --><table class="table table-hover"><tr class="bg-primary text-white"><td><input type="checkbox">全选</td><td>商品名称</td><td>图片</td><td>商品单价</td><td>商品数量</td><td>商品总价</td><td>操作</td></tr><tr><td><input type="checkbox"></td><td>黄金手铐</td><td><img src="img/bookList/1.png" alt=""></td><td>¥999</td><td><div style="width: 100px;" class="input-group mb-3"><div class="input-group-append"><button class="btn btn-outline-secondary" type="button"id="button-addon2">-</button></div><input type="text" class="form-control" value="1"aria-label="Recipient's username" aria-describedby="button-addon2"><div class="input-group-append"><button class="btn btn-outline-secondary" type="button"id="button-addon2">+</button></div></div></td><td>¥999</td><td><button type="button" class="btn btn-danger">删除</button><button type="button" class="btn btn-warning">修改</button></td></tr><tr><td><input type="checkbox"></td><td>黄金手铐</td><td><img src="img/bookList/1.png" alt=""></td><td>¥999</td><td><div style="width: 100px;" class="input-group mb-3"><div class="input-group-append"><button class="btn btn-outline-secondary" type="button"id="button-addon2">-</button></div><input type="text" class="form-control" value="1"aria-label="Recipient's username" aria-describedby="button-addon2"><div class="input-group-append"><button class="btn btn-outline-secondary" type="button"id="button-addon2">+</button></div></div></td><td>¥999</td><td><button type="button" class="btn btn-danger">删除</button><button type="button" class="btn btn-warning">修改</button></td></tr><tr><td><input type="checkbox"></td><td>黄金手铐</td><td><img src="img/bookList/1.png" alt=""></td><td>¥999</td><td><div style="width: 100px;" class="input-group mb-3"><div class="input-group-append"><button class="btn btn-outline-secondary" type="button"id="button-addon2">-</button></div><input type="text" class="form-control" value="1"aria-label="Recipient's username" aria-describedby="button-addon2"><div class="input-group-append"><button class="btn btn-outline-secondary" type="button"id="button-addon2">+</button></div></div></td><td>¥999</td><td><button type="button" class="btn btn-danger">删除</button><button type="button" class="btn btn-warning">修改</button></td></tr></table><p class="text-center"><button class="btn btn-danger btn-outline-info">清空购物车</button><button class="btn btn-success">继续购物</button><button class="btn btn-warning" data-toggle = "modal" data-target = "#orderModal">立即结算</button></p><!-- 分页 --><nav aria-label="Page navigation example"><ul class="pagination" style="padding-left: 40%;"><li class="page-item"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li></ul></nav></div></div><!-- 第三行 版权信息 start --><div class="row" style="margin: 20px 0px;border-top: 1px solid gainsboro;"><div class="col"><div class="text-center">©所有版权信息归卓京教育所有</div></div></div><!-- 第三行 版权信息 end--></div></body>
</html>
bootstrap——模态框相关推荐
- Bootstrap模态框使用WebUploader点击失效问题解决
Bootstrap模态框使用WebUploader点击失效问题解决 参考文章: (1)Bootstrap模态框使用WebUploader点击失效问题解决 (2)https://www.cnblogs. ...
- bootstrap 模态框满屏_如何设置Bootstrap模态框modal的高度和宽度?
以下图片是Bootstrap4模态框默认大小,一般情况Bootstrap模态框有两个默认大小,一个是"modal-sm" 小模态框,一个是"modal-lg"大 ...
- bootstrap 模态框满屏_解决Ueditor在bootstarp 模态框中全屏问题
基本的一些配置就不说了.先说一下要注意的问题:首先是zIndex的设置.记住最好都显示设置模态框和ueditor的zIndex.理清他们的层叠关系. 特别是用到ueditor里面的图片上传功能的更要设 ...
- 前端之bootstrap模态框
简介:模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. Modal简介 Modal实现弹出表单 M ...
- html遮罩层模态提示,页面遮罩层，并且阻止页面body滚动。bootstrap模态框原理，.bootstrap模态...
页面遮罩层,并且阻止页面body滚动.bootstrap模态框原理,.bootstrap模态 实现思路: 1.需要有一个层将body遮住,放在body上方. 2.修改body的overflow属性值为 ...
- bootstrap模态框垂直居中显示
在用bootstrap模态框时,特别是小尺寸的模态框时,其显示位置接近屏幕顶端,在网上查找之后,找到了让模态框居中显示的实现.代码如下 function centerModals(){$('.moda ...
- Bootstrap 模态框插件Modal 的事件
事件 Bootstrap模态框插件modal提供了 4 个事件,通过监听这些事件,可以对特定操作阶段的用户行为作出响应.这些事件及含义见表 5‑2. 表 5‑2 Bootstrap模态框插件modal ...
- Bootstrap 模态框插件Modal 的方法
方法 Bootstrap模态框插件Modal的方法主要用来打开.关闭.隐藏Bootstrap模态框插件Modal: 1..modal(options) 使用一个可选的对象参数 options 调用 B ...
- Bootstrap 模态框插件Modal 的选项
选项 Bootstrap模态框插件modal提供了 4 个选项,所有的选项都可以通过 data 属性或 JavaScript 进行设置.见表 5‑1: 表 5‑1 Bootstrap模态框插件moda ...
- 基于bootstrap模态框的日期选择器
近来由于工作需求,以bootstrap模态框+DIV+CSS+JS做了一个适用于移动端的日期选择器,能够满足多样的需求,目前处于第一个版本,后续可能会继续更新.废话不多说,直接进入制作过程. 首先,需 ...
最新文章
- 搭建hue遇到的错误 Couldn't find log associated with operation handle: OperationHandle
- 通用窗口类 Inventory Pro 2.1.2 Demo1（下）
- 体感Kinect手势识别开发基本原理
- 数据结构于算法—线性表
- junit 案例（三）
- 图推荐算法在EE问题上的应用
- 现代软件工程 作业 1 个人项目
- mysql where varchar_MySQL数据库之MySQL索引使用：字段为varchar类型时，条件要使用''包起来...
- 【MySQL】MySQL 数据库表锁和行锁
- 清北学堂模拟赛d6t4 数组异或
- 平面最近点对问题(分治)
- oracle导入导出表
- SSRF攻击实例解析
- javascript二级省市select联动菜单
- 曼彻斯特编码_网络工程师考点集锦（数字编码和编码效率）
- linux下查看opencv版本
- python写圣诞祝福_圣诞节啊，用Python写一棵圣诞树出来
- 完善：HTML5表单新特征简介与举例——张鑫旭
- Win11+RTX3060显卡 配置cuda和cudnn
- 与第三方Api接口对接需要注意的点