本文介绍如何在网页中使用Bootstrap框架实现弹框功能，包括引入必要的JS和CSS文件，设置按钮作为触发器，以及模态框的HTML结构。通过具体代码示例，展示了弹框的创建和使用。
在做网页的时候，经常有些东西如果放在另一个页面就会觉得内容比较少，这个时候我们就可以考虑使用弹框来实现这个功能。
首先我们需要引用bootstrap.js文件或者是Bootstrap.min.js文件，因为我们需要使用到model.js.
我们需要使用触发器，可以使用按钮或者a标签来做触发器，在这里我们使用按钮来作为触发器。
一下是我写的一个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<title>按钮弹框</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<script src="/scripts/jquery.min.js"></script>
</head>
<body>
<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-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>
<form action="" method="post">
<div class="form-horizontal form-label-left">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">课程名称 <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="work-title" required="required" class="form-control col-md-7 col-xs-12">
</div>
</div>
</div>
<div class="form-horizontal form-label-left">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">课程描述 <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<textarea name="work_request"rows="5" cols="31" id="first-name" required="required" class="form-control col-md-7 col-xs-12"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-primary">
提交
</button>
</form>
</div>
</div><!-- /.modal-content -->
</div>
<!-- 弹出框 -->
</body>
</html>
代码分析：
aria-hidden="true"是指模态不可见，知道触发器被触发。
class="close"用于关闭模态框的按钮的CSS样式。
data-dismiss="modal"用于关闭模态框。
data-toggle="modal"
data-target="#myModal"用于设置触发器打开模态框
扫一扫
496
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
