感覺每次彈出來時頁面拉伸那一下感受特別不好。怎么設置模態彈出框在彈出來的時候頁面不拉伸，是不是設置彈出時滾動條不消失。<!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>
- 1 回答
- 0 關注
- 1764 瀏覽
添加回答
舉報
0/150
提交
取消