前端学习记录

最新推荐文章于 2022-10-13 15:21:00 发布

爱唱歌de小青蛙

最新推荐文章于 2022-10-13 15:21:00 发布

阅读量245

点赞数

分类专栏：前端

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/xm_csdn/article/details/78212995

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

jquery: http://jquery.cuishifeng.cn/id.html

Bootstrap教程: http://www.runoob.com/bootstrap/bootstrap-tutorial.html

Bootstrap中文网：http://www.bootcss.com/

在Bootstrap中文网中下载Bootstrap （bootstrap-3.3.7-dist.zip），解压下载文件，把文件放到项目中调用即可

如：http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 模态框（Modal）插件方法</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<h2>模态框（Modal）插件方法</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	开始演示模态框
</button>
<!-- 模态框（Modal） -->
<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">
					模态框（Modal）标题
				</h4>
			</div>
			<div class="modal-body">
				按下 ESC 按钮退出。
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" 
						data-dismiss="modal">关闭
				</button>
				<button type="button" class="btn btn-primary">
					提交更改
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
$(function () { $('#myModal').modal({
	keyboard: true
})});
</script>

</body>
</html>