Bootstrap轻量弹框和模态框
2022-03-30 本文已影响0人
马佳乐
轻量弹框
- 在div里添加
.toast属性，可在该div里创建两个div一个添加.toast-header属性，一个添加.toast-body属性 - 弹框头和弹框体里可添加内容
- 默认弹框不显示，可在外层div里添加.show属性进行显示
- 可在弹框右上角添加关闭按钮
<button class="close"><span>×</span></button> - 想要按钮点击后显示弹框，可用js代码设置
$(".toast").toast("show"); - 默认点击按钮后弹窗显示后会消失，想要手动取消自动关闭，在最外层div里设置
data-autohide="false" - 想要手动点击右上角的关闭按钮起作用，在button标签里添加
data-dismiss="toast"属性 - 想要弹窗的过渡效果明显，可在最外层div里添加
.fade属性 - 想要弹窗放在不同位置，可设置最外层div的style属性，例如：
style="position: absolute;top: 0;right: 0;"
练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--移动设备优先-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--引入Bootstrap CSS-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<title></title>
</head>
<body>
<div class="toast fade" data-autohide="false" style="position: absolute;top: 0;right: 0;">
<div class="toast-header">
<h5 class="mr-auto">提示框</h5>
<button class="close" data-dismiss="toast"><span>×</span></button>
</div>
<div class="toast-body">
弹框体：一些提示信息！
</div>
</div>
<button id="btn" class="btn btn-success">弹出弹框</button>
<!--引入JavaScript和jQuery-->
<!--jQuery第一个，然后Bootstrap （集成了 Popper.js和Bootstrap.js）-->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
<script>
$(function() {
$("#btn").click(function() {
$(".toast").toast("show");
});
});
</script>
模态框
- 最外层div需添加
.modal属性，第二层div添加.modal-dialog属性，第三层div添加.modal-content属性 - 在第三层div里添加三个并列div，分别添加
.modal-header、.modal-body和.modal-footer属性 - 可添加按钮来控制模态框的显示
<button class="btn btn-success" data-target="#mymodal" data-toggle="modal">弹出模态框</button> - 此时点击按钮即可显示模态框，接着点击屏幕上除模态框的其他区域，都可将其关闭
- 如果不想点击背景关闭模态框，可在最外层div里添加
data-backdrop="static"属性 - 可在模态框尾部添加按钮进行相应功能设计
- 模态框默认在屏幕上方中间，想要使其在屏幕中心显示，可在含
.modal-dialog的div里添加.modal-dialog-centered属性 - 也可在含
.modal-dialog的div里设置模态框的大小，例如.modal-sm
练习：
<div class="modal fade" id="mymodal">
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content">
<div class="modal-header">
<h5>添加商品</h5>
<button class="close" data-dismiss="modal"><span>×</span></button>
</div>
<div class="modal-body">
body
<p>可添加任意内容</p>
</div>
<div class="modal-footer">
<button class="btn btn-success">添加商品</button>
<button class="btn btn-secondary" data-dismiss="modal">取消添加</button>
</div>
</div>
</div>
</div>
<button class="btn btn-success" data-target="#mymodal" data-toggle="modal">弹出模态框</button>
