如何模态弹出框在弹出来的时候页面不拉伸
感觉每次弹出来时页面拉伸那一下感受特别不好。怎么设置模态弹出框在弹出来的时候页面不拉伸，是不是设置弹出时滚动条不消失。
<!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>
aladdinx1回答
-
刚破壳的陈旭元
你的代码我基本没看（比较懒），但是弹出框的话可以写成遮罩类型的！
随时随地看视频慕课网APP
相关分类
Bootstrap