Bootstrap动态模态框怎么用，要注意什么
导读：这篇文章分享给大家的内容是关于Bootstrap动态模态框怎么用，要注意什么，本文介绍得很详细，内容很有参考价值，希望可以帮到有需要的小伙伴，接下来就让小编带领大家一起了解看看吧。 1.要用bootStrap这个框架...
这篇文章分享给大家的内容是关于Bootstrap动态模态框怎么用，要注意什么，本文介绍得很详细，内容很有参考价值，希望可以帮到有需要的小伙伴，接下来就让小编带领大家一起了解看看吧。1.要用bootStrap这个框架就必须要重载它的class类,也就是说class要一样
代码如下：
有疑问的可以在下面留言，欢迎大家一起交流
1.1动态模态框
!DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
meta name="viewport" content="width=device-width, initial-scale=1.0">
meta http-equiv="X-UA-Compatible" content="ie=edge">
title>
Document/title>
link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css" rel="external nofollow" rel="external nofollow" >
script src="bootstrap-3.3.7/js/jquery.min.js">
/script>
script src="bootstrap-3.3.7/js/bootstrap.min.js">
/script>
script src="bootstrap-3.3.7/js/docs.min.js">
/script>
/head>
body>
div class="container">
div class="page-header">
div class="h2">
bootstrap框架 small>
s/small>
/div>
/div>
!-- 动态框 -->
div class="modal">
!-- modal默认是隐藏的 -->
div class="modal-dialog">
div class="modal-content">
!-- 头部关闭按钮 -->
div class="modal-header">
button type="button" class="close myclose" data-dismiss="modal">
span >
×/span>
/button>
div class="h3 modal-title">
标题部分/div>
!-- 内容部分 -->
div class="modal-body">
P>
这是内容部分/P>
/div>
!-- 页脚 -->
div class="modal-footer">
button type="button" class="btn btn-primary myclose" data-dismiss="modal">
Close/button>
button type="button" class="btn btn-warning myclose">
save/button>
/div>
/div>
/div>
/div>
/div>
a href="#" rel="external nofollow" class="btn btn-success" id="show">
显示对话框/a>
/div>
/body>
/html>
script>
$(function(){
$('#show').click(function(){
$('.modal').modal('show')
}
)
}
)
/script>
1.2静态模态框
!DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
meta name="viewport" content="width=device-width, initial-scale=1.0">
meta http-equiv="X-UA-Compatible" content="ie=edge">
title>
Document/title>
link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css" rel="external nofollow" rel="external nofollow" >
script src="bootstrap-3.3.7/js/jquery.min.js">
/script>
script src="bootstrap-3.3.7/js/bootstrap.min.js">
/script>
script src="bootstrap-3.3.7/js/docs.min.js">
/script>
/head>
body>
div class="container">
div class="page-header">
div class="h2">
bootstrap框架 small>
s/small>
/div>
!-- 静态模态框 官方有一个bug就是在写静态框的时候在按钮上要绑定同一个class-->
div class="modal-dialog">
div class="modal-content">
div class="modal-header">
button type="button" class="close myclose" data-dismiss="modal">
span>
×/span>
/button>
h3>
Model标题/h3>
/div>
!-- body部分 -->
div class="modal-body">
p>
这是身体部分/p>
/div>
!-- footer部分 -->
div class="modal-footer">
button class="btn btn-info myclose" data-dismiss="modal">
close/button>
button class="btn btn-primary myclose">
save/button>
/div>
/div>
/div>
/div>
/div>
/div>
/div>
/body>
/html>
script>
$(function(){
$('.myclose').click(function(){
$('.modal-dialog').css('display','none')
}
)
}
)
/script>
总结
通过以上内容的阐述，相信大家对“Bootstrap动态模态框怎么用，要注意什么”已经有了进一步的了解，更多相关的问题，欢迎关注网络或到官网咨询客服。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： Bootstrap动态模态框怎么用，要注意什么
本文地址： https://pptw.com/jishu/653767.html