模态框 bootstrap弹出框提示框警告框灵活多变自己定义

最新推荐文章于 2024-04-20 12:04:09 发布

不会功夫的茶

最新推荐文章于 2024-04-20 12:04:09 发布

阅读量543

点赞数

分类专栏：前端文章标签： bootstrap 模态框弹出框

本文链接：https://blog.csdn.net/qq_36986305/article/details/81011246

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近在看bootstrap，然后要用到一些提示框，但什么都用 alert不仅死板，还没什么用户体验，所以就学了一下能自定义的提示框，如图

在这个模态框里我们可以自己添加任何HTML组件，如文本框、下拉框等；代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<style type="text/css">
.modal-footer {
text-align: center;
}
/* 窗体大小 */
.modal-dialog {
width: 276px;
margin: 30px auto;
}
/*显示的区域大小*/
element.style {
display: block;
height: 282px;
width: 276px;
display: block;
margin-left:200px"
}

</style>
<script type="text/javascript">
function text(){
alert(11);
}
</script>

<h2>创建模态框（Modal）</h2>

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
弹出模态框
</button>

<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-footer">
<button type="button" class="btn btn-primary" >分开下载
</button>
<button type="button" οnclick="text()" class="btn btn-primary" data-dismiss="modal">
合并下载
</button>
</div>
</div>
</div>
</div>
</body>
</html>

不会功夫的茶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
模态框 bootstrap弹出框提示框警告框灵活多变自己定义

最近在看bootstrap，然后要用到一些提示框，但什么都用 alert不仅死板，还没什么用户体验，所以就学了一下能自定义的提示框，如图在这个模态框里我们可以自己添加任何HTML组件，如文本框、下拉框等；代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt; &lt;title...
复制链接

扫一扫