试试这段代码的CSS。
.modal-open { overflow: hidden !important; }
.modal-open *{ position:unset; z-index: 0; }
.modal-open .modal-backdrop { position: fixed; z-index: 99998 !important; }
.modal-open .modal { position: fixed; z-index: 99999 !important; }
Ex:
$(window).on('load', function() {
/* Latest compiled and minified JavaScript included as External Resource */
$(document).ready(function() { $('.modal').modal("show"); });
});
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
padding-top: 50px;
}
.my-module {
position: fixed;
top: 0;
left: 0;
border: 1px solid red;
}
.modal-open { overflow: hidden !important; }
.modal-open *{ position:unset; z-index: 0; }
.modal-open .modal-backdrop { position: fixed; z-index: 99998 !important; }
.modal-open .modal { position: fixed; z-index: 99999 !important; }
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Bootstrap 3 Template</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="//code.jquery.com/jquery-compat-git.js"></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
</head>
<body class="modal-open">
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et augue sed lorem laoreet vehicula sit amet eget tortor. Donec in turpis gravida, commodo mauris ac, gravida neque. Proin eget tristique lorem. Integer tincidunt sem sit amet metus ultricies, vitae placerat dui gravida. Pellentesque viverra, nunc imperdiet egestas imperdiet, magna massa varius arcu, vitae iaculis tortor quam vitae arcu. Fusce posuere non lectus vel cursus. In rutrum sed dui non sollicitudin. Proin ante magna, imperdiet ac nisl ut, rhoncus pellentesque tortor.</p>
<p>Cras ac velit vitae elit tempus tempus. Nullam eu posuere leo. In posuere, tortor et cursus ultrices, lorem lacus efficitur dolor, a aliquet elit urna sed tortor. Donec dignissim ante ex, non congue ex efficitur sit amet. Suspendisse lacinia tristique odio, vel sagittis dui tempor tempus. Quisque gravida mauris metus, sed aliquam lacus sollicitudin sit amet. Pellentesque laoreet facilisis scelerisque. Nunc a pulvinar magna. Maecenas at mollis tortor.</p>
<p>Vivamus ultricies, odio sed ornare maximus, libero justo dignissim nulla, nec pharetra neque nulla vel leo. Donec imperdiet sem sem, eu interdum justo tincidunt finibus. Vestibulum lacinia diam gravida risus luctus, elementum blandit dui porttitor. Quisque varius lacus et tempor faucibus. Nam eros nunc, gravida eu tellus eget, placerat porta leo. Duis tempus ultricies felis sit amet cursus. Nunc egestas ex non lacus laoreet tincidunt. Sed malesuada placerat elementum. Mauris eu rutrum nulla. Nunc consequat lacus eget libero tincidunt, in semper eros accumsan. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse eu tincidunt quam, ut tincidunt eros. Donec luctus velit ac nulla lacinia malesuada.</p>
<p>Vestibulum id mi in urna lacinia mollis. Pellentesque sit amet mauris ullamcorper, suscipit dolor in, lacinia leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Vivamus sollicitudin tempus massa sed molestie. Nullam quis neque vel nunc convallis porta a laoreet ex. Aliquam tempus hendrerit turpis eleifend convallis. Cras enim eros, fermentum sed velit eget, dignissim malesuada augue. Fusce ut fermentum nisl, vel imperdiet libero. Etiam luctus arcu volutpat turpis finibus pulvinar eget in augue. Integer sapien nisi, scelerisque ultrices quam sit amet, aliquam placerat neque. Morbi consequat porttitor lacus, quis pulvinar dolor aliquam ut. Ut et dolor id est iaculis lobortis nec aliquet nisl.</p>
<p>Nunc et tortor cursus, ullamcorper justo vitae, ullamcorper sapien. In fringilla urna quam, et finibus ipsum finibus eu. In fermentum turpis ut eros semper, non gravida purus ornare. Praesent vehicula lobortis lacinia. Vivamus nec elit libero. Suspendisse porta neque ut erat tempor rhoncus. Nunc quis massa in ante rhoncus bibendum. Nam maximus ex vitae orci luctus scelerisque. Sed id mauris iaculis, scelerisque mauris feugiat, vehicula ipsum. Duis semper erat ac nulla sodales gravida. Suspendisse nec sapien pharetra, scelerisque odio in, dignissim erat. Aenean feugiat sagittis eros, in mattis orci tristique lacinia. Phasellus posuere id neque sed mattis. Morbi accumsan faucibus ullamcorper.</p>
<div class="my-module">
This is a container for "my-module" with some fixed position. The module contains the modal code.
<div class="modal fade in" aria-hidden="false" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
</div>
</body></html>
