<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>模态框</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"/> <!-- Bootstrap的所有插件都依赖于jQuery，必须在引入bootstrap.min.js前引入jQuery --> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <!-- 压缩版的bootstrap.min.js包含了所有的Bootstrap数据API插件 --> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h3>创建模态框（Modal）</h3> <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">点击我显示模态框</button> <!-- 定义模态框触发器，此处为按钮触发 --> <form method="post" action="/myweb/ajax.do" class="form-horizontal" role="form" id="myForm" onsubmit="return"> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <!-- 定义模态框，过渡效果为淡入，id为myModal,tabindex=-1可以禁用使用tab切换，aria-labelledby用于引用模态框的标题，aria-hidden=true保持模态框在触发前窗口不可见 --> <div class="modal-dialog"> <!-- 显示模态框对话框模型（若不写下一个div则没有颜色） --> <div class="modal-content"> <!-- 显示模态框白色背景，所有内容都写在这个div里面 --> <div class="btn-info modal-header"> <!-- 模态框标题 --> <button type="button" class="close" data-dismiss="modal">×</button> <!-- 关闭按钮 --> <h4>您好，欢迎进入模态框</h4> <!-- 标题内容 --> </div> <div class="modal-body"> <!-- 模态框内容，我在此处添加一个表单 --> <form class="form-horizontal" role="form"> <div class="form-group"> <label for="uname" class="col-sm-2 control-label">用户名</label> <div class="col-sm-9"> <input type="text" id="uname" name="uname" class="form-control well" placeholder="请输入用户名"/> </div> </div> <div class="form-group"> <label for="pwd" class="col-sm-2 control-label">密码</label> <div class="col-sm-9"> <input type="password" id="pwd" name="pwd" class="form-control well" placeholder="请输入密码"/> </div> </div> </form> </div> <div class="modal-footer"> <!-- 模态框底部样式，一般是提交或者确定按钮 --> <button type="submit" class="btn btn-info">确定</button> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> </div> </div><!-- /.modal-content --> </div> </div> <!-- /.modal --> </form> </div> </body> </html>