感觉每次弹出来时页面拉伸那一下感受特别不好。怎么设置模态弹出框在弹出来的时候页面不拉伸，是不是设置弹出时滚动条不消失。<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>某管理系统</title><link rel="stylesheet" href="css/bootstrap.min.css"><!--[if lt IE 9]><script src="js/html5shiv.js"></script><script src="js/respond.min.js"></script><![endif]--><style>#col-left{margin-left: 0;}.panel-body .btn-primary,.panel-body .btn-info{margin-bottom:5px;}#btn-check{display: block;margin: 10px;}.navbar .label{font-size: 20px;}</style></head><body><nav class="navbar navbar-inverse"> <div> <!-- Brand and toggle get grouped for better mobile display --> <div> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> </button> <a href="#">某管理系统</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#">首页 <span>(current)</span></a></li> <li> <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">特点<span></span></a> <ul> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator"></li> <li><a href="#">Separated link</a></li> <li role="separator"></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li><a href="#">帮助</a></li> </ul> <form class="navbar-form pull-right form-inline"> <div> <input type="email" placeholder="请你的输入用户名"> </div> <div> <input type="text" placeholder="请你的输入密码"> </div> <button type="submit" class="btn btn-default">登录</button> </form> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --></nav><div><div><div id="col-left"><div class="panel panel-default"><div><a href=""> 首页</a></div><div><a href="">信息建立</a></div><div><a href="">信息建立</a></div><div><a href="">信息建立</a></div><div><a href="">信息建立</a></div><div><a href="">信息建立</a></div><div><a href="">帮助</a></div></div></div><div><h2>管理控制台</h2><hr><div><span class="label label-default">操作1</span><span class="label label-primary">操作2</span><span class="label label-success">操作3</span><span class="label label-info">操作4</span><span class="label label-warning">操作5</span><span class="label label-danger">操作6</span></div> <div> <div> <div class="panel panel-primary"> <div>最新提醒</div> <div> <ul> <li class="list-group-item list-group-item-success active"> 提示 您的订单 正在审核</li> <li class="list-group-item list-group-item-warning active"> 提示 您的订单 审核通过</li> <li class="list-group-item list-group-item-success active"> 提示 您的订单 被打回</li> </ul> </div> </div></div> <div> <div class="panel panel-primary"> <div> <h3>Panel title</h3> </div> <div> <div> <a href="#" class="list-group-item list-group-item-success active">订单审批<span>42</span></a> <a href="#" class="list-group-item list-group-item-info active">付款审批<span>10</span></a> <a href="#" class="list-group-item list-group-item-warning active">收款审批<span>20</span></a> </div> </div></div> </div> </div> <div> <div> <div class="panel panel-primary"> <!-- Default panel contents --> <div>最新订单</div> <!-- Table --> <table> <tr> <th>#</th> <th>产品</th> <th>数量</th> <th>总金额</th> <th>业务员</th> </tr> <tr> <td>1</td> <td>Apple Macbook air</td> <td>10</td> <td>80000</td> <td>王小贱</td> </tr> <tr> <td>2</td> <td>Apple Ipad air</td> <td>20</td> <td>10000</td> <td>王小贱</td> </tr> <tr> <td>3</td> <td>Apple Macbook pro</td> <td>5</td> <td>50000</td> <td>王小贱</td> </tr> </table><button class="btn btn-primary" id="btn-check" type="button"> 查看群组>> </button></div> </div> <div><div class="panel panel-primary"> <div> <h3>工程进度</h3> </div> <div> <button class="btn btn-primary" type="button"> 水井挖掘工程 </button> <div> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span>40% Complete (success)</span> </div></div><button class="btn btn-info" type="button"> 基建工程 </button><div> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> <span>20% Complete</span> </div></div> </div></div></div> </div></div><button class="btn btn-primary" data-toggle="modal" data-target="#mymodal">模态弹出窗</button><div class="modal fade" id="mymodal"><!-- modal在这里做一个背景容器；在内容很多的时候，可以再modal容器中进行滚动操作，避免了弹窗不能移动的弊端 --><div><!-- modal-dialog宽度自适应、左右水平居中的样式 --><div><div><button type="button" data-dismiss="modal" aria-hidden="true">×</button><h4>modal标题</h4></div><div><p>modal主要内容部分</p></div><div><button class="btn btn-default" data-dismiss="modal" type="button">关闭</button><button type="button" class="btn btn-primary">保存</button></div></div></div></div><script src="js/jquery-1.11.1.js"></script><script src="js/bootstrap.js"></script></body></html>
添加回答
举报
0/150
提交
取消