弹出框是大家做前端总会需要的,例如没事就开始弹出是否确认删除啥的!~
没事就是开始弹出是否确认啥的!~
注意我们的bootstrap是有的
有的!
这四个破玩意总会需要————总用他们四个(就像东北F4:赵四/刘能/小沈阳/谢广坤)
bootstrap.min.css
jquery.min.js
popper.min.js
bootstrap.min.js
做web页面的小伙伴一定和我一样总会需要JQuery和Bootstrap的导入和使用
做习惯了就会习惯了~
就像这个不带背景的弹出窗
链接: 链接占时没有,多说一句IT行业马爸爸是我偶像
图片:
这样,我工作的动力就打打代码
看一下代码可以粘贴的吧
<head>
<title>Bootstrap_弹出窗</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div style="text-align: center;">
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#demo">
点击我出现弹出框
</button>
</div>
<div class="modal fade" id="demo">
<div class="modal-dialog">
<div class="modal-content" style="margin-top: 50%;">
<div class="modal-header">
<h5>您确定删除吗?</h5>
</div>
<div class="modal-body">
XXXXXXXXXXXXXXXXXX
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">确定</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
</div>
</body>
- 尝试一下就好使了,bootstrap上有
四个文件http地址吧,如果粘贴太多了(jquery肯定都有就发一个popper.min.js吧):
https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js
其它三个就是(你们都有)
bootstrap.min.css
jquery.min.js
bootstrap.min.js
你们都有然后主要的是bootstrap.min.css 有个样式自己需要修改掉
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
}
删除掉
这样背景黑色就木有啦!
## ありがとう 谢谢大家