<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.1.12.4.min.js"></script>
<script src="js/bootstrap.js"></script>
<title>Bootstrap</title>
</head>
<style type="text/css">
*{
font-family: 微软雅黑;
}
</style>
<body>
<div class="container">
<h1 class="page-header">BootStrap</h1>
<button class="btn btn-danger">look</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<span>Detail</span>
<span class="close" data-dismiss="modal">×</span>
</div>
<div class="modal-body">
<p>this is my picture,do you like it?this is my picture,do you like it?
this is my picture,do you like it?this is my picture,do you like it?this is my picture,do you like it?
this is my picture,do you like it?this is my picture,do you like it?this is my picture,do you like it?
this is my picture,do you like it?</p>
</div>
<div class="modal-footer">
<button class="save btn btn-danger">save</button>
<button class="btn btn-primary" data-dismiss="modal">close</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$('button').click(function(){
$('#myModal').modal('show');
});
$('.save').click(function(){
alert("suceess!");
});
// 弹框出现后让背景颜色变色
$('#myModal').on('shown.bs.modal',function(e){
$('body').css({'background':'#ccc'});
})
// 弹框隐藏后让背景颜色变色
$('#myModal').on('hidden.bs.modal',function(e){
$('body').css({'background':'#f40'});
})
</script>
</html>
bootstrap-js组件-弹出框
最新推荐文章于 2024-04-28 21:18:55 发布