Bootstrap 第13章 模态框插件
程序员文章站
2022-05-31 13:26:53
...
index.hmtl
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>模态框插件</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 100px;">
<!--模态框声明
<div class="modal fade" id="myModal" tabindex="-1">
窗口声明
<div class="modal-dialog modal-lg">
内容声明
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">会员登陆</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default">注册</button>
<button class="btn btn-primary">登陆</button>
</div>
</div>
</div>
</div-->
<!-- <btton class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">点击弹窗</btton> -->
<!--模态框声明-->
<!-- <div class="modal fade" id="myModal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
</div>
</div>
</div> -->
<!-- <btton class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" href="content.html">点击弹窗</btton> -->
<div class="modal fade" id="myModal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">会员登陆</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default">注册</button>
<button class="btn btn-primary">登陆</button>
</div>
</div>
</div>
</div>
<btton class="btn btn-primary btn-lg" id="btn">点击弹窗</btton>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$('#btn').on('click',function(){
$("#myModal").modal('show');
});
$('#myModal').modal({
show:false,
remote:'content.html'
});
$('#myModal').on('show.bs.modal',function(){
alert('当调用 show 方法时立即触发！');
});
$('#myModal').on('shown.bs.modal',function(){
alert('当弹窗完全出现再执行！');
});
$('#myModal').on('hide.bs.modal',function(){
alert('当调用 hide 方法时立即触发！');
});
$('#myModal').on('hidden.bs.modal',function(){
alert('当模态框完全关闭后触发');
});
$('#myModal').on('loaded.bs.modal',function(){
alert('当远程加载后触发');
});
</script>
</body>
</html>
content.html
<div class="modal-header">
<button class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">远程加载</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">X</div>
<div class="col-md-4">X</div>
<div class="col-md-4">X</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default">注册</button>
<button class="btn btn-primary">登陆</button>
</div>
效果图：