Bootstrap 弹出模态窗口实例
一个静态的模态窗口实例，如下面的实例所示：
实例源码：
源代码：
执行
执行中...
x
1
<!DOCTYPE html>2
<html>3
<head>4
<meta charset="utf-8"> 5
<title>Bootstrap 实例 - 模态框（Modal）插件</title>6
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">7
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>8
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>9
</head>10
<body>11
12
<h2>创建模态框（Modal）</h2>13
<!-- 按钮触发模态框 -->14
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">15
开始演示模态框16
</button>17
<!-- 模态框（Modal） -->18
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">19
<div class="modal-dialog">20
<div class="modal-content">21
<div class="modal-header">22
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">23
×24
</button>25
<h4 class="modal-title" id="myModalLabel">26
模态框（Modal）标题27
</h4>28
</div>29
<div class="modal-body">30
在这里添加一些文本31
</div>32
<div class="modal-footer">33
/**代码未完, 请加载全部代码(NowJava.com).**/执行结果：
本文系作者在时代Java发表，未经许可，不得转载。如有侵权，请联系nowjava@qq.com删除。
编辑于
关注时代Java