Bootstrap modal: background jumps to top on toggle

我有一个问题，与模态。我在页面上有一个按钮，可以切换模式。当模态显示时，页面跳到顶部。

我已经尽了一切努力找到解决办法，但是我真的迷路了。

编辑:

我也试过: $('#myModal').modal('show');，但它有完全相同的效果。

111531 次浏览
小开

我没有看到一个具体的错误，但我会建议你的 检查你的 html 语法。

对您的源代码进行一个小小的测试就会出现

第127行，第34列: 未封闭的元素 div。

              <div class="inner onlySides">

这可能是个问题。

小开

如果使用标记调用 mode，请尝试从 href 属性中删除“ #”，然后使用 data 属性调用 mode。

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
小开
最佳答案

When the modal opens a modal-open class is set to the <body> tag. This class sets overflow: hidden; to the body. Add this rule to your stylesheet to override the bootstrap.css style:

body.modal-open {
overflow: visible;
}

现在卷轴应该还在原地。

小开

我尝试在本地主机上复制这个问题，尽管看起来很奇怪，但是与您正在使用的 Bootstrap JS 文件有冲突。

Try commenting your code of:

<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() is not a function错误-我猜测这应该是根本原因，但我还没有比较它与其他 JS 文件。

小开

在 <div id="footer">之前或 <div id="mainFrame" class="group"> div 之后有2个额外的 div闭合标记。我正在用2012视觉工作室快车来检查这个。

请删除这两个额外的 div，让我们知道它是如何工作的。我删除了额外的 div 并删除了所有自定义脚本。只保留了底部的 jquery 核心和 bootstrap。这是最终输出的截图。给你是你的 jsbin 游乐场，这是工作良好。

I suggest you to use Rel = “ nofollow noReferrer”> headjs to load all the scripts and css files. also it is not a good practice of loadidng any scripts twice.

enter image description here

小开

尝试使用这个来打开模式，看看会发生什么:

<a href="#generalModal" class="btn btn-primary btn-lg" data-toggle="modal">
Launch demo modal
</a>
小开

我试图设置。模态顶部在屏幕的中心。

.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时遇到了同样的问题

It was a problem for clicking on a link:

诀窍是: 返回虚假;

<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 标记的直接子标记！您可以将触发模式的按钮的 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">&times;</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();
});

这个可以帮你阻止滚动条出现在顶部，对我很有效

小开

在花了几个小时阅读了几十个答案之后，我再次从引导文件中复制了原始代码，并一步一步地进行了调试，以查看是什么原因导致我总是跳到顶部。因为 Bootstrap 3的最新版本显示了你现在所处的位置的模态。 我发现我的 css body-tag 中的 -webkit-transform: translate3d(0,0,0);和 height: 100%引起了这种行为，也许这对某些人有帮助。

小开 
body.modal-open {
overflow: visible !important;
}

我需要重要的属性来修复它

小开

如果您使用锚标记作为 <a href"#" ..> ... </a>和 href="#"是创建问题，删除。 You can read more over here

小开

对于我的工程时，我 变了的版本从 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>
小开

Mode-open { 职位: 继承; }

This worked like a charm for me.

小开

it's good idea for fixed it, it's look like jock!

刚刚好，添加了两个 CSS 代码在您的风格之一

.body.modal-open { overflow:visible;padding-right:0px !important;}
.body.modal-open { height:auto;padding-right:0px !important;}

Https://github.com/jschr/bootstrap-modal/issues/131#issuecomment-153405449

小开

我花了好几个小时在这里和其他地方尝试各种方法。对于 angularjs 材料的使用，我必须禁用 uibModal.open config 对象 arg 上的动画。

例如:

  $uibModal.open(
{
animation: false,
component: 'myDialogComponent',
size: 'lg',
resolve: {
details: function() {
return detailsCollection;
}
}
}
);

希望这能帮到别人。

小开

我尝试了以上所有的例子——这是唯一对我有效的方法:

.modal-open {


padding-right: 0 !important;


}

从模型的 对边移除填充-防止跳转。

小开

我也遇到了同样的问题，但没有一个答案对我有帮助。找到了一个看起来很蠢的解决办法，但至少对我来说是有用的。

我发现页面只滚动到顶部一次，然后下一个打开的模态按预期工作。然后我发现在 DOM 中隐藏任何元素都会启动同样奇怪的滚动。所以我只是在页面加载后创建一个虚拟 div，而不是隐藏和删除它，这就解决了问题。

var $dummy= $("<div>");
$("body").append($dummy);
$dummy.hide().remove();
小开

The easiest way to solve the jumping background is to define two parameters:

body.modal-open {
overflow: visible;
padding-right: 0 !important;
}
小开

If you are facing this issue in an Angular program add the below code at the first line of .scss file.

::ng-deep {
body.modal-open {
overflow: visible !important;
position: absolute !important;
}
}
小开

我觉得这样更容易:

overflow-y: hidden;

当应用到模态打开的主体类时-这可以防止主体在背景中的垂直滚动，并且允许用户在没有滚动到顶部的情况下停留在同一个位置。

小开

Removing the href="#" absolutely solved it in my case

小开

我也面临着同样的问题。每当模式弹出打开页面滚动到顶部。我到处寻找，尝试了上面提到的所有想法，但没有一个真正帮到我。除了那个带 body.modal-open CSS 的。

所以我加了一句

body.modal-open {
overflow: visible;
position: relative;
overflow-x: hidden;
}

这是我的 CSS文件，它修复了滚动到顶部的问题，但它增加了2个滚动器的页面，为此我带来了一个解决方案，实际上增加了一个 CSS到 超文本标示语言标记本身。我不知道这是否是道德的编码或不，但我们是设计师，我们可以给 超文本标示语言标签样式，所以我这样做。我加了一些 jquery

$(document)
.on('show.bs.modal', '.modal', function () { $('html').css('overflow', 'hidden')})
.on('hidden.bs.modal', '.modal', function () { $('html').css('overflow', 'auto') })

切换 超文本标示语言的滚动条，对我很有效。

小开

“ body”元素的默认“ overflow”样式为:

body {
overflow: visible;
}

在我的页面中，“溢出”样式改为:

body {
overflow-y: hidden;
}

然后我发现当 mode 是 open 时，‘ mode-open’类被添加到‘ body’元素中。

“ mode-open”类使用“ overflow”样式，导致页面或内部元素向上滚动。

为了防止这种情况，我需要保持相同的设置之前和之后的“模态开放”类被添加到“主体”元素。

因此，我在 CSS 文件中添加了这一部分:

body.modal-open {
overflow: visible;
overflow-y: hidden;
}

现在，‘ overflow’和‘ overflow-y’对于‘ body’元素都是相同的，在‘ mode-open’被添加到‘ body’元素之前和之后。

也许您需要添加‘ overflow-x’或其他样式元素，只要适应您的情况即可。


提交答案