Javascript 引导模式：切换时背景跳到顶部
我有一个问题，与模态。我在页面上有一个按钮，可以切换模式。当模态显示时，页面跳转到顶部 我已经尽我所能找到解决方案，但我真的迷路了 编辑：Javascript 引导模式：切换时背景跳到顶部,javascript,jquery,css,twitter-bootstrap,twitter-bootstrap-3,Javascript,Jquery,Css,Twitter Bootstrap,Twitter Bootstrap 3,我有一个问题，与模态。我在页面上有一个按钮，可以切换模式。当模态显示时，页面跳转到顶部 我已经尽我所能找到解决方案，但我真的迷路了 编辑： 我也尝试过：$（'myModal'）.modal（'show'）但它有完全相同的效果。我没有看到具体的错误，但我建议您这样做 用你的消息来源做一个小测试会给我一些错误，比如 第127行第34列：未关闭的元素div <div class="inner onlySides"> 这可能是一个问题。如果您使用标记调用mo
我也尝试过：
$（'myModal'）.modal（'show'）但它有完全相同的效果。我没有看到具体的错误，但我建议您这样做
用你的消息来源做一个小测试会给我一些错误，比如
第127行第34列：未关闭的元素div
<div class="inner onlySides">
这可能是一个问题。如果您使用标记调用modal。尝试从href属性中删除“#”，并使用数据属性调用modal
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
启动演示模式
当模式打开时，模式打开
类被设置为
标记。此类设置溢出：隐藏到正文。将此规则添加到样式表以覆盖bootstrap.css样式：
body.modal-open {
overflow: visible;
}
现在滚动应该保持在原位。我尝试在本地主机上复制此问题，尽管看起来很奇怪，但与您使用的引导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="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
这对我来说很有用
我用Bootstrap版本3尝试过，但没有成功。我仍然无法确定问题所在，但Firebug的某个地方给了我一个e.preventDefault（）不是一个函数
错误-我猜这应该是根本原因，但我还没有将其与其他JS文件进行比较。您在
div之前或之后有两个额外的关闭div
标记。我正在使用visual studio 2012 express来检查这一点
请删除这两个额外的div，让我们知道它是如何工作的。我删除了额外的div并删除了所有自定义脚本。在页脚仅保留jquery核心和引导。这是最终输出的结果。这是你的jsbin游乐场，运转良好
我建议您使用加载所有脚本和css文件。此外，将任何脚本加载两次也不是一个好的做法
尝试使用此选项打开modal，看看会发生什么：
<a href="#generalModal" class="btn btn-primary btn-lg" data-toggle="modal">
Launch demo modal
</a>
我试图在屏幕中央设置.modal top
.modal {
position: absolute;
top: 50%;
}
只是我的想法 如果pstenstrm的答案不适合您，请尝试将其与此替换按钮HTML结合使用：
<a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#generalModal" id="launchbutton" href="#launchbutton"> Launch demo modal </a>
这将使按钮保持在屏幕上。我在使用Bootstrap 2.3.2时遇到了同样的问题
单击链接时出现问题：
诀窍是：返回false
<a href="#" class="btn" onclick="openPositionPopup(${positionReport[0]}); return false;">
<i class="icon-map-marker"></i>
</a>
我也有同样的问题，我想我已经解决了您只需将模式HTML作为body标记的直接子级放置即可！您可以将触发模式的按钮的HTML代码放在任何需要的地方。我相信这可以避免引发这个问题的CSS继承和位置问题
例如：
<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>
启动演示模式
&时代；接近
情态标题
...
接近
保存更改
试试这个，它非常好用
/* fix body.modal-open overflow:hidden */
body.modal-open {
height: auto;
}
终于想出了这个。
不要将针对模态的按钮包装在锚定标记中
坏的
好
参见详细信息
这一个是为我做的
body.modal-open {
overflow: inherit;
padding-right: 0 !important;
}
在bootstrap 3.1.1中，我使用此解决方案解决了以下问题：
body.modal-open {
position: absolute !important;
}
可能使用嵌套在代码中某处的模态：
body.modal-open {
overflow: visible;
position: absolute;
width: 100%;
height:100%;
}
对我来说，这是一个位置，高度和溢出的组合
$('the thing you click on').click(function ($e) {
$e.preventDefault();
});
这将帮助您停止滚动条在顶部的运行。它对我很有效。在几个小时内阅读了几十个答案后，我再次从引导文件中复制了原始代码，并一步一步地调试，以查看是什么导致我总是跳到顶部。因为最新版本的Bootstrap3在你现在的位置显示了模态。
我发现-webkit转换：translate3d（0,0,0）和高度：100%
在我的css body标签中导致了这种行为。也许这对某人有帮助
body.modal-open {
overflow: visible !important;
}
我需要它的重要属性来修复它如果您将锚定标记用作
并且href=“#”
正在产生问题，请将其删除。
当我将3.1.1版本更改为3.3.7
如果不必使用3.3.1版，请尝试更换
更改后，最好检查功能的其余部分是否正常工作
<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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
body.modal-open{
职位：继承；
}
这对我很有吸引力 修复它是个好主意，它看起来像个运动员
只需在您的样式中添加两个css代码中的一个即可
.body.modal-open{溢出：可见；右填充：0px！重要；}
.body.modal-open{height:自动；padding right:0px！重要；}
我花了数小时在这里和其他地方尝试了所有东西。对于angularjs材质的使用，我不得不禁用uibModal.open config对象arg上的动画
例如：
$uibModal.open(
{
animation: false,
component: 'myDialogComponent',
size: 'lg',
resolve: {
details: function() {
return detailsCollection;
}
}
}
);
希望这对其他人有所帮助。我尝试了以上所有的例子-这是唯一对我有效的方法：
.modal-open {
padding-right: 0 !important;
}
移除模型右侧的填充物-防止跳跃。我遇到了同样的问题，但没有一个答案对我有帮助。找到了一个看似愚蠢的解决方法，但至少在我的情况下是有效的
我发现页面只会滚动到顶部一次，然后下一个打开的modals就可以正常工作了。然后我发现隐藏DOM中的任何元素都会启动相同的奇怪滚动。所以我只是创建了一个虚拟div af
<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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
$uibModal.open(
{
animation: false,
component: 'myDialogComponent',
size: 'lg',
resolve: {
details: function() {
return detailsCollection;
}
}
}
);
.modal-open {
padding-right: 0 !important;
}
var $dummy= $("<div>");
$("body").append($dummy);
$dummy.hide().remove();
body.modal-open {
overflow: visible;
padding-right: 0 !important;
}
::ng-deep {
body.modal-open {
overflow: visible !important;
position: absolute !important;
}
}
overflow-y: hidden;