Bootstrap模式：背景跳转到顶部的切换
我有一个问题，与一个模式。 我有一个页面上的button，切换模式。 当模式显示时，页面跳转到顶部。
我尽我所能find一个解决scheme/等，但我真的迷路了。
编辑：
我也试过： $('#myModal').modal('show'); 但它具有完全相同的效果。
当模式打开modal-open课被设置为<body>标记。 这个类设置overflow: hidden; 到身体。 将此规则添加到样式表中以覆盖bootstrap.css样式：
body.modal-open { overflow: visible; }
现在滚动应该留在原地。
如果你用标签调用模态。 尝试从href属性中删除“＃”，并用数据属性调用模态。
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button>
$('the thing you click on').click(function ($e) { $e.preventDefault(); });
这将帮助你停止顶部的滚动条。它为我工作
我没有看到具体的错误，但我build议你检查一下你的html语法 。
用你的源码进行一个小小的testing，给我错误
第127行，第34列：未封闭的元素div。
<div class="inner onlySides">
这可能是一个问题。
可能使用的模式嵌套在代码中的某处：
body.modal-open { overflow: visible; position: absolute; width: 100%; height:100%; }
对我来说，这是一个位置，高度和溢出的组合。
我试图在屏幕中心设置.modal顶部。
.modal { position: absolute; top: 50%; }
只是我的两个想法。
在bootstrap 3.1.1我解决了这个解决scheme：
body.modal-open { position: absolute !important; }
body.modal-open { overflow: visible !important; }
我需要重要的属性来解决它
如果您使用锚标签作为<a href"#" ..> ... </a>并且href="#"正在创build问题，请将其删除。 你可以在这里阅读更多
我试图在我的本地主机上复制这个问题，并且看起来很奇怪，与您正在使用的Bootstrap JS文件存在冲突。
尝试评论你的代码：
<script src="/min/?f=bootstrap.min.js,modernizr.js,bootstrap-datetimepicker.js,nprogress.js,feedback.js,select2.min.js,jquery.unveil.js,equalheights.jquery.js,hogan-v2.0.0.min.edu-custom.js,jquery.visible.min.js,handlebars-v1.2.0.js,typeahead.bundle.min.js,jquery.gridster.js,cookie.jquery.js,jquery.autosize.min.js,application.js&ver=1392814384"></script>
而是使用Bootstrap 2.3.2：
<script src="ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
这使它为我工作。
我试过Bootstrap版本3，但没有奏效。 我仍然无法find问题的一部分，但沿着Firebug的地方扔e.preventDefault() is not a function错误 – 我猜这应该是根本原因，但我还没有比较它与其他JS文件。
您在<div id="footer">或在<div id="mainFrame" class="group"> div之后有2个额外的结束div标记。 我正在使用visual studio 2012 express来检查这个。
请删除这两个额外的div，让我们知道它是如何工作的。 我删除了额外的div并删除了所有的自定义脚本。 只留下jQuery核心和引导在页脚。 这里是最终输出的画面。 这里是你正在工作的jsbin游乐场。
我build议你使用headjs加载所有的脚本和css文件。 也不是两次装入脚本的好习惯。
尝试使用这个打开模式，看看会发生什么：
<a href="#generalModal" class="btn btn-primary btn-lg" data-toggle="modal"> Launch demo modal </a>
我有使用Bootstrap 2.3.2相同的问题
点击链接是一个问题：
诀窍是：return false;
<a href="#" class="btn" onclick="openPositionPopup(${positionReport[0]}); return false;"> <i class="icon-map-marker"></i> </a>
和js：
function openModal() { $('#myModal').modal('show'); }
我有同样的问题，我想我知道了。 您只需将模态HTML作为body标签的直接子元素即可 ！ 尽pipe你可以将触发模式的button放在HTML代码中。 我相信这可以避免引发这个问题的CSSinheritance和定位问题。
例：
<body> <!-- All your other HTML code --> <div> <!-- Button trigger modal --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> </div> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <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" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </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> </div> </div> </body>
最后想出了这一个。 不要将定位模式的button封装在锚标签中。
坏
<a href"#"> <button type="button" class="btn" data-toggle="modal" data-target="#myModal">See Detail</button> </a>
好
<button type="button" class="btn" data-toggle="modal" data-target="#myModal">See Detail</button>
在几个小时内读完几十个答案之后，我再次从引导文件中复制了原始代码，并一步一步地debugging，看看是什么导致我总是跳到顶端。 因为Bootstrap 3的实际最新版本正在显示现在位置的模态。 我发现了-webkit-transform: translate3d(0,0,0); 和height: 100%在我的CSS身体标签引起了这种行为。 也许这有助于一个人。
对于我来说，当我将版本从3.1.1 更改为3.3.7
如果您不必使用3.3.1版本，请尝试更换。
更改之后， 检查function的其余部分是否正常工作是很好的。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="bootstrap/3.3.7/js/bootstrap.min.js"></script>
如果pstenstrm的答案不适合您，请尝试将其与此replacebuttonHTML相结合：
<a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#generalModal" id="launchbutton" href="#launchbutton"> Launch demo modal </a>
这应该保持在屏幕上的button。
试试这个完美的作品
/* fix body.modal-open overflow:hidden */ body.modal-open { height: auto; }
这一个为我做了
body.modal-open { overflow: inherit; padding-right: 0 !important; }
