<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>模态框插件</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body style="margin:50px;"> <!--模态框声明 fade淡入淡出 tabindex="-1"取消焦点--> <div class="modal fade " id="myModal" tabindex="-1"> <!--模态框窗口声明 窗口的大小 modal-lg modal-sm --> <div class="modal-dialog modal-sm"> <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-lg-3 col-md-4 col-sm-6 col-xs-12">1</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div> </div> </div> </div> <div class="modal-footer"> <button class="btn btn-default">登录</button> <button class="btn btn-primary">注册</button> </div> </div> </div> </div> <!--data-backdrop="static"背景存在黑灰透明遮罩，点击空白背景部分不可被关闭 true背景存在黑灰透明遮罩，点击空白背景部分可被关闭 false 背景不存在黑灰透明遮罩，点击空白背景部分不可被关闭 data-keyboard true 按esc键关闭 false 按esc键不关闭 data-show true 默认显示 false 隐藏 herf 可取代data-target方法--> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" href="content.html" data-backdrop=true>点击</button> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="js/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>