blocks|key|163602|text|当模式打开时，一个modal-open类被设置为<body>标记。这个类将overflow:+hidden;设置为body。将此规则添加到样式表以覆盖bootstrap.css样式：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|163603|body.modal-open+{
++++overflow:+visible;
}|code-block|syntax|javascript|163604|现在，卷轴应该留在适当的位置。|163605|entityMap^0|9|A|O|6|11|H|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

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

<pre><code>body.modal-open {
    overflow: visible;
}
</code></pre>

<p>Now the scroll should stay in place.</p>


blocks|key|162276|text|如果您正在使用标签调用modal。尝试从具有数据属性的href+attribute.And调用模式中删除'#‘。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|162277|<button+class="btn+btn-primary+btn-lg"+data-toggle="modal"+data-target="#myModal">
++Launch+demo+modal
</button>|code-block|syntax|javascript|162278|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>If you are calling modal with  tag. Try removing '#' from href attribute.And call modal with data attributes.</p>

<pre><code>&lt;button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"&gt;
  Launch demo modal
&lt;/button&gt;
</code></pre>


blocks|key|161504|text|如果您使用锚定标记作为<a+href"#"+..>+...+</a>，而href="#"正在制造问题，请删除它。您可以在here上阅读更多内容|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|161505|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/jschr/bootstrap-modal/issues/131^0|B|N|10|8|1O|4|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@$9|S|A|T|1|U]]|E|$]]|$1|F|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

<p>if you are using anchor tag as <code>&lt;a href"#" ..&gt; ... &lt;/a&gt;</code> and <code>href="#"</code> is creating problem, remove that.
You can read more over <a href="https://github.com/jschr/bootstrap-modal/issues/131" rel="noreferrer">here</a></p>


blocks|key|161449|text|$('the+thing+you+click+on').click(function+($e)+{
++++++++++++$e.preventDefault();
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|161450|这将帮助您停止滚动条在top.It上为我工作|unstyled|161451|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>$('the thing you click on').click(function ($e) {
            $e.preventDefault();
});
</code></pre>

<p>This will help you to stop the scroll bar going on the top.It worked for me </p>


blocks|key|2969502|text|可能使用代码中某处嵌套的模态函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2969503|body.modal-open+{
++++overflow:+visible;
++++position:+absolute;
++++width:+100%25;
++++height:100%25;
}|code-block|syntax|javascript|2969504|对我来说，这是位置、高度和溢出的组合。|2969505|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Possibly working with modals nested somewhere in the code:</p>

<pre><code>body.modal-open {
    overflow: visible;
    position: absolute;
    width: 100%;
    height:100%;
}
</code></pre>

<p>For me it was a combination of position, height and overflow.</p>


blocks|key|2756450|text|我没有看到具体的错误，但我建议您使用check+your+html+syntax。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2756451|对您的源代码进行的一次小测试会给出如下错误|2756452|2756453|第127行，第34列:未闭合元素div.+++++++++++<div+class="inner+onlySides">|blockquote|2756454|2756455|这可能是一个问题。|2756456|entityMap|0|LINK|mutability|MUTABLE|url|http://validator.w3.org/^0|I|M|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|Z|8|@]|9|@]|C|$]]|$1|G|3|H|5|I|7|10|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|11|8|@]|9|@]|C|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|C|$]]|$1|M|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>I don't see a specific error, but I would advise you to <a href="http://validator.w3.org/" rel="nofollow">check your html syntax</a>.</p>

<p>A tiny test with your source gives me errors like </p>

<blockquote>
  <p>Line 127, Column 34: Unclosed element div.</p>

<pre><code>              &lt;div class="inner onlySides"&gt;
</code></pre>
</blockquote>

<p>This could be an issue.</p>


blocks|key|2969298|text|我使用Bootstrap+2.3.2也遇到了同样的问题|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2969299|这是一个点击链接的问题：|2969300|诀窍是:返回false；|2969301|<a+href="#"+class="btn"+onclick="openPositionPopup(${positionReport[0]});+return+false;">
+++++<i+class="icon-map-marker"></i>
</a>|code-block|syntax|javascript|2969302|和js：|2969303|function+openModal()+{
++++$('#myModal').modal('show');
}|2969304|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>I had the same issue using Bootstrap 2.3.2</p>

<p>It was a problem for clicking on a link:</p>

<p>The trick was: return false;</p>

<pre><code>&lt;a href="#" class="btn" onclick="openPositionPopup(${positionReport[0]}); return false;"&gt;
     &lt;i class="icon-map-marker"&gt;&lt;/i&gt;
&lt;/a&gt;
</code></pre>

<p>and the js:</p>

<pre><code>function openModal() {
    $('#myModal').modal('show');
}
</code></pre>


blocks|key|2756788|text|在bootstrap+3.1.1中，我解决了这个问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2756789|body.modal-open+{
++++position:+absolute+!important;
}|code-block|syntax|javascript|2756790|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>In bootstrap 3.1.1 I solved with this solution:</p>

<pre><code>body.modal-open {
    position: absolute !important;
}
</code></pre>


blocks|key|2757105|text|解决跳跃背景最简单的方法是定义两个参数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2757106|body.modal-open+{
++overflow:+visible;
++padding-right:+0+!important;
}|code-block|syntax|javascript|2757107|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>The easiest way to solve the jumping background is to define two parameters:</p>

<pre><code>body.modal-open {
  overflow: visible;
  padding-right: 0 !important;
}
</code></pre>


blocks|key|2756514|text|我尝试在我的本地主机上复制这个问题，尽管看起来很奇怪，但它与您正在使用的Bootstrap+JS文件存在冲突。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2756515|尝试注释您的代码：|2756516|<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>++++|code-block|syntax|javascript|2756517|改用Bootstrap+2.3.2：|2756518|<script+src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>|2756519|这让它对我来说很有效。|2756520|我在Bootstrap版本3中尝试过，但不起作用。我仍然不能准确地指出问题的部分，但是火虫抛给我一个e.preventDefault()+is+not+a+function错误-我猜这应该是根本原因，但我还没有将它与其他JS文件进行比较。|offset|length|style|CODE|2756521|entityMap^0|0|0|0|0|0|0|1E|10|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|11|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|12|8|@$Q|13|R|14|S|T]]|9|@]|A|$]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

<p>I tried replicating this problem on my localhost and as weird as it may seem, there is a conflict with the Bootstrap JS file that you are using.</p>

<p>Try commenting your code of:</p>

<pre><code>&lt;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&amp;ver=1392814384"&gt;&lt;/script&gt;    
</code></pre>

<p>And instead use Bootstrap 2.3.2:</p>

<pre><code>&lt;script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
</code></pre>

<p>This made it work for me.</p>

<p>I tried it with Bootstrap version 3 but that didn't work. I am still unable to pinpoint the trouble part but somewhere along Firebug threw me a <code>e.preventDefault() is not a function</code> error - I am guessing this should be the root cause but I am yet to compare it with the other JS files.</p>


blocks|key|2969193|text|我试着把.modal设置在屏幕的中央。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2969194|.modal+{
++++position:+absolute;
++++top:+50%25;
}|code-block|syntax|javascript|2969195|这是我的两个想法。|2969196|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I tried to set .modal top at the center of the screen. </p>

<pre><code>.modal {
    position: absolute;
    top: 50%;
}
</code></pre>

<p>Just my 2cents of thoughts. </p>


blocks|key|2756559|text|在<div+id="footer">之前或<div+id="mainFrame"+class="group">+div之后有两个额外的结束div标记。我正在使用visual+studio+2012+express来检查它。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2756560|请删除这两个额外的div，并让我们知道它是如何工作的。我删除了额外的div并删除了所有自定义脚本。只在页脚保留了jquery核心和引导。这是最终输出的截图。here是您的jsbin游乐场，它工作得很好。|2756561|我建议你使用来加载所有的脚本和css文件。而且，将任何脚本加载两次也不是一种好的做法。|2756562|​|2756563|📷|atomic|2756564|2756565|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/kicokabu/1|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/467017bca9306f1348cc3cb39eba628a.jpeg|imageAlt^0|1|H|L|Y|1X|3|0|26|4|0|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1A|8|@]|D|@$9|1B|A|1C|1|1D]]|E|$]]|$1|H|3|I|5|6|7|1E|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|1F|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|1G|8|@]|D|@$9|1H|A|1I|1|1J]]|E|$]]|$1|O|3|K|5|6|7|1K|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|1L|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]|X|$5|Y|T|Z|E|$10|11|12|-4]]]]

<p>you have 2 extra closing <code>div</code> tags just before to the <code>&lt;div id="footer"&gt;</code> or after the <code>&lt;div id="mainFrame" class="group"&gt;</code> div.  I'm using visual studio 2012 express to inspect this.</p>

<p>Please remove these 2 extra divs and let us know how it works. I removed extra divs and removed all custom scripts. retained only jquery core and bootstrap at the footer. here is the sreenshot of final output.  <a href="http://jsbin.com/kicokabu/1" rel="nofollow noreferrer">here</a> is the jsbin playground for you which is working fine. </p>

<p>I suggest you to use <strong><a href="http://headjs.com/" rel="nofollow noreferrer">headjs</a></strong> to load all the scripts and css files. also it is not a good practice of loadidng any scripts twice. </p>

<p><img src="https://i.stack.imgur.com/Jkrcj.jpg" alt="enter image description here"></p>


blocks|key|163654|text|尝试使用此命令打开modal，看看会发生什么：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|163655|<a+href="#generalModal"+class="btn+btn-primary+btn-lg"+data-toggle="modal">
++Launch+demo+modal+
</a>|code-block|syntax|javascript|163656|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try using this to open modal and see what happens:</p>

<pre><code>&lt;a href="#generalModal" class="btn btn-primary btn-lg" data-toggle="modal"&gt;
  Launch demo modal 
&lt;/a&gt;
</code></pre>


blocks|key|162541|text|body.modal-open+{
overflow:+visible+!important;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|162542|我需要它的重要属性来修复它|unstyled|162543|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>body.modal-open {
overflow: visible !important;
}
</code></pre>

<p>I needed the important attribute for it to fix it</p>


blocks|key|165311|text|body.modal-open+{+++++position:+inherit;+}|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|165312|这对我来说就像是一个护身符。|165313|entityMap^0|0|16|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|N|8|@]|D|@]|E|$]]]|I|$]]

<p><code>body.modal-open {
    position: inherit;
}</code></p>

<p>This worked like a charm for me. </p>


blocks|key|163907|text|如果您在Angular程序中遇到此问题，请在.scss文件的第一行添加以下代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|163908|::ng-deep+{+++
+++++body.modal-open+{
++++++++++overflow:+visible+!important;
++++++++++position:+absolute+!important;+++
+++++}+
}|code-block|syntax|javascript|163909|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>::ng-deep {   
     body.modal-open {
          overflow: visible !important;
          position: absolute !important;   
     } 
}
</code></pre>


blocks|key|165389|text|在我的例子中，删除href="#“绝对解决了它|type|unstyled|depth|inlineStyleRanges|entityRanges|data|165390|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Removing the href=&quot;#&quot; absolutely solved it in my case</p>


blocks|key|2969759|text|我花了几个小时在这里和其他地方尝试了所有的东西。对于angularjs-material的使用，我不得不禁用uibModal.open配置对象arg上的动画。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2969760|例如：|2969761|++$uibModal.open(
++++{
++++++animation:+false,
++++++component:+'myDialogComponent',
++++++size:+'lg',
++++++resolve:+{
++++++++details:+function()+{
++++++++++return+detailsCollection;
++++++++}
++++++}
++++}
++);|code-block|syntax|javascript|2969762|希望这对其他人有帮助。|2969763|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I spent hours on this trying everything here and elsewhere.  For angularjs-material usage, turned out I had to disable animation on the uibModal.open config object arg.  </p>

<p>For example:</p>

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

<p>Hope this helps someone else.</p>


blocks|key|161621|text|我也面临着同样的问题。无论何时打开模式弹出窗口，页面都会滚动到顶部。我到处寻找并尝试了上面提到的所有想法，但它们都没有真正对我有帮助。除了使用body.modal-open+css的那个。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|161622|所以我加了一个|161623|body.modal-open+{
++++++++overflow:+visible;
++++++++position:+relative;
++++++++overflow-x:+hidden;
++++}|code-block|syntax|javascript|161624|这是我的CSS文件，它修复了滚动到顶部的问题，但它向页面添加了2个滚动条，为此，我提出了一个解决方案，将CSS添加到HTML标记本身。我不知道编码是否合乎道德，但我们是设计师，我们可以给HTML标签赋予样式，所以我做到了。我添加了一些jquery|BOLD|161625|$(document)
++++.on('show.bs.modal',+'.modal',+function+()+{+$('html').css('overflow',+'hidden')})
++++.on('hidden.bs.modal',+'.modal',+function+()+{+$('html').css('overflow',+'auto')+})|161626|切换HTML的滚动条，这对我很有效。|161627|entityMap^0|1Z|F|0|0|0|4|3|1G|3|1M|4|2L|4|0|0|2|4|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Z|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|10|8|@$9|11|A|12|B|O]|$9|13|A|14|B|O]|$9|15|A|16|B|O]|$9|17|A|18|B|O]]|D|@]|E|$]]|$1|P|3|Q|5|J|7|19|8|@]|D|@]|E|$K|L]]|$1|R|3|S|5|6|7|1A|8|@$9|1B|A|1C|B|O]]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|U|$]]

<p>I was also facing the same problem. Whenever modal popup opened the page scrolled to the top. I looked everywhere and tried all the ideas mentioned above but none of them really helped me. Except for the one with <code>body.modal-open</code> css.</p>
<p>So I added</p>
<pre><code>body.modal-open {
        overflow: visible;
        position: relative;
        overflow-x: hidden;
    }
</code></pre>
<p>This to my <strong>CSS</strong> file which fixed the problem of scrolling to the top but it added 2 scrollers to the page, for which I came with a solution to actually add a <strong>CSS</strong> to the <strong>HTML</strong> tag itself. I don't know if it is ethical for coding or not but we are designers and we can give styling to <strong>HTML</strong> tag so I did. I added some jquery</p>
<pre><code>$(document)
    .on('show.bs.modal', '.modal', function () { $('html').css('overflow', 'hidden')})
    .on('hidden.bs.modal', '.modal', function () { $('html').css('overflow', 'auto') })
</code></pre>
<p>for toggling the scrollbar of <strong>HTML</strong> and it worked for me.</p>


blocks|key|165191|text|我也有同样的问题，我想我已经解决了。只需将模态作为body标记的直接子标记！不过，您可以将触发模式的按钮的HTML代码放在需要的任何位置。我相信这避免了引发这个问题的CSS继承和位置问题。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|165192|示例：|165193|<body>
++++
++++<div>
++++++++
++++++++<button+class="btn+btn-primary+btn-lg"+data-toggle="modal"+data-target="#myModal">
++++++++++++Launch+demo+modal
++++++++</button>
++++</div>

++++
++++<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>|code-block|syntax|javascript|165194|entityMap^0|N|8|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<p>I had the same problem and I think I figure it out. <strong>You just need to place the modal HTML as a direct child of the body tag</strong>! You can place the HTML code for the button triggering the modal wherever you need though. I believe this avoids CSS inheritance and position issues that trigger this problem.</p>

<p>Example:</p>

<pre><code>&lt;body&gt;
    &lt;!-- All your other HTML code --&gt;
    &lt;div&gt;
        &lt;!-- Button trigger modal --&gt;
        &lt;button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"&gt;
            Launch demo modal
        &lt;/button&gt;
    &lt;/div&gt;

    &lt;!-- Modal --&gt;
    &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-dialog"&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
            &lt;button type="button" class="close" data-dismiss="modal"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;span class="sr-only"&gt;Close&lt;/span&gt;&lt;/button&gt;
            &lt;h4 class="modal-title" id="myModalLabel"&gt;Modal title&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
            ...
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
            &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
            &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
</code></pre>


blocks|key|163746|text|最终解决了这个问题。不要将指向模式的按钮包装在锚点标记中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|163747|坏的|163748|<a+href"#">
++++<button+type="button"+class="btn"
data-toggle="modal"+data-target="#myModal">See+Detail</button>
</a>|code-block|syntax|javascript|163749|好的|163750|<button+type="button"+class="btn"
++++data-toggle="modal"+data-target="#myModal">See+Detail</button>|163751|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Finally figured this one out.
Do NOT wrap the button targeting the modal in an anchor tag.</p>

<p>Bad</p>

<pre><code>&lt;a href"#"&gt;
    &lt;button type="button" class="btn"
data-toggle="modal" data-target="#myModal"&gt;See Detail&lt;/button&gt;
&lt;/a&gt;
</code></pre>

<p>Good</p>

<pre><code>&lt;button type="button" class="btn"
    data-toggle="modal" data-target="#myModal"&gt;See Detail&lt;/button&gt;
</code></pre>


blocks|key|2969467|text|这个是为我做的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2969468|body.modal-open+{
++++overflow:+inherit;
++++padding-right:+0+!important;
}|code-block|syntax|javascript|2969469|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This one did it for me</p>

<pre><code>body.modal-open {
    overflow: inherit;
    padding-right: 0 !important;
}
</code></pre>


blocks|key|165259|text|在几个小时内阅读了几十个答案后，我再次从bootstrap文件中复制了原始代码，并一步一步地进行调试，看看是什么原因导致我总是跳到顶部。因为Bootstrap+3的最新版本显示了您现在所在位置的模式。我发现是我的css+body-tag中的-webkit-transform:+translate3d(0,0,0);和height:+100%25导致了这种行为。也许这对某些人有帮助。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|165260|entityMap^0|3C|12|4F|C|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<p>After reading dozens answers over several hours I copied the original code from the bootstrap file again and debugged step by step to see what caused that I always jump to the top. Because the actual latest version of Bootstrap 3 is showing the modal at the position you're at right now. 
I had found out that <code>-webkit-transform: translate3d(0,0,0);</code> and <code>height: 100%</code> in my css body-tag caused this behaviour. Maybe this helps some one.</p>


blocks|key|2969645|text|对我来说，当我将版本从3.1.1更改为3.3.7时，可以正常工作|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2969646|如果您不必使用版本3.3.1，请尝试替换。|2969647|完成更改后，最好检查函数的其余部分是否正常工作。|2969648|<link+rel="stylesheet"+href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"+integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va%2BPmSTsz/K68vbdEjh4u"+crossorigin="anonymous">+

<script+src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>|code-block|syntax|javascript|2969649|entityMap^0|B|5|J|5|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|W|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|X|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

<p>For me works when I <strong>changed</strong> the version from <strong>3.1.1</strong> to <strong>3.3.7</strong></p>

<p>If you do not have to use version 3.3.1 try replacing.</p>

<p>After the change, it is good to <strong>check</strong> that the rest of the function works correctly.</p>

<pre><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt; 

&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
</code></pre>


blocks|key|2969778|text|我尝试了上面所有的例子--这是唯一对我有效的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2969779|.modal-open+{

++++++++++++padding-right:+0+!important;

++++++++}|code-block|syntax|javascript|2969780|从模型的右侧移除填充-防止跳跃。|offset|length|style|BOLD|2969781|entityMap^0|0|0|4|1|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I tried all of the above examples - this is the only thing that worked for me:</p>

<pre><code>.modal-open {

            padding-right: 0 !important;

        }
</code></pre>

<p>Removing the padding from the <strong>right</strong> side of the model - prevents the jump.</p>


blocks|key|161582|text|我也遇到了同样的问题，但没有一个答案对我有帮助。我找到了一个看起来很愚蠢的变通方法，但至少在我的情况下是可行的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|161583|我发现页面只滚动到顶部一次，然后下一次打开的modals就会像预期的那样工作。然后我发现，隐藏DOM中的任何元素都会引发同样奇怪的滚动。所以我只是在页面加载后创建了一个虚拟div，而不是隐藏和删除它，这样就解决了这个问题。|161584|var+$dummy=+$("<div>");
$("body").append($dummy);
$dummy.hide().remove();|code-block|syntax|javascript|161585|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I got the same issue and none of answers helped me. Found a workaround which looks stupid but it works at least in my case.</p>

<p>I found that page is scrolling to top only once and after that next opened modals works as expected. Than I found that hiding of any element in the DOM initiates the same strange scroll. So I just creating a dummy div after page load than hidding and removing it and this solved the issue.</p>

<pre><code>var $dummy= $("&lt;div&gt;");
$("body").append($dummy);
$dummy.hide().remove();
</code></pre>


blocks|key|2757148|text|我发现使用下面的代码更容易：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2757149|overflow-y:+hidden;|code-block|syntax|javascript|2757150|当在模式打开时应用于body类时-这会阻止body在背景中的垂直滚动，并允许用户停留在相同的位置，而不会滚动到顶部。|2757151|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I find it easier with this:</p>
<pre><code>overflow-y: hidden;
</code></pre>
<p>When applied to the body class on modal opening - this prevents the vertical scroll of the body in the background and allows the user to stay in the same place without the scroll to top also.</p>


blocks|key|2969921|text|“body”元素的默认“overflow”样式为：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2969922|body+{
++++overflow:+visible;
}|code-block|syntax|javascript|2969923|在我的页面中，“overflow”样式被更改为：|2969924|body+{
++++overflow-y:+hidden;
}|2969925|然后我发现，当modal打开时，会将‘modal+open’类添加到'body‘元素中。|2969926|‘modal+open’类扰乱了'overflow‘风格，并导致页面或内部元素向上滚动。|2969927|为了防止这种情况，我需要在‘body+open’类添加到'body‘元素之前和之后保持相同的设置。|2969928|所以我在我的CSS文件中添加了这个部分：|2969929|body.modal-open+{
++++overflow:+visible;
++++overflow-y:+hidden;
}|2969930|现在'overflow‘和'overflow-y’对于'body‘元素来说都是一样的，在'body’元素中添加‘modal+open’前后都是一样的。|2969931|也许你需要添加'overflow-x‘或者其他的样式元素，只要适应你的情况即可。|2969932|entityMap^0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|16|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|17|8|@]|9|@]|A|$]]|$1|S|3|T|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|6|7|19|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|Z|$]]

<p>The default 'overflow' style of 'body' element is:</p>
<pre><code>body {
    overflow: visible;
}
</code></pre>
<p>In my page the 'overflow' style was changed to:</p>
<pre><code>body {
    overflow-y: hidden;
}
</code></pre>
<p>Then I've discovered that when modal is open, the 'modal-open' class is added to the 'body' element.</p>
<p>The 'modal-open' class mess with 'overflow' style and causes the page or inner element to scroll up.</p>
<p>To prevent this I need to keep the same settings before and after the 'modal-open' class is added to the 'body' element.</p>
<p>So I've added this section in my CSS file:</p>
<pre><code>body.modal-open {
    overflow: visible;
    overflow-y: hidden;
}
</code></pre>
<p>Now both 'overflow' and 'overflow-y' are the same for 'body' element, before and after 'modal-open' is added to the 'body' element.</p>
<p>Maybe you need to add 'overflow-x' or another style element, just adapt to your case.</p>


blocks|key|2756719|text|试试这个，效果很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2756720|/*+fix+body.modal-open+overflow:hidden+*/
body.modal-open+{
++++height:+auto;
}|code-block|syntax|javascript|2756721|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try this it works perfectly</p>

<pre><code>/* fix body.modal-open overflow:hidden */
body.modal-open {
    height: auto;
}
</code></pre>


blocks|key|2756996|text|这是修复它的好主意，它看起来像乔克！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2756997|2756998|刚刚好，在你的样式中添加了两个css代码中的一个|blockquote|2756999|2757000|.body.modal-open+{+overflow:visible;padding-right:0px+!important;}|offset|length|style|CODE|2757001|.body.modal-open+{+height:auto;padding-right:0px+!important;}|2757002|2757003|https://github.com/jschr/bootstrap-modal/issues/131#issuecomment-153405449|2757004|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|1U|0|0|1P|0|0|0|22|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|10|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|11|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|12|8|@$I|13|J|14|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|15|8|@$I|16|J|17|K|L]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|18|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|19|8|@]|9|@$I|1A|J|1B|1|1C]]|A|$]]|$1|R|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Q]]]]

<p>it's good idea for fixed it, it's look like jock!<br></p>
<blockquote>
<h2>just enough, added one of two css code in your style</h2>
<p><code>.body.modal-open { overflow:visible;padding-right:0px !important;}</code><br>
<code>.body.modal-open { height:auto;padding-right:0px !important;}</code></p>
</blockquote>
<p><a href="https://github.com/jschr/bootstrap-modal/issues/131#issuecomment-153405449" rel="nofollow noreferrer">https://github.com/jschr/bootstrap-modal/issues/131#issuecomment-153405449</a></p>


blocks|key|2969230|text|如果pstenstrm的答案对你不起作用，试着把它和这个替换按钮HTML结合起来：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2969231|<a+class="btn+btn-primary+btn-lg"+data-toggle="modal"+data-target="#generalModal"+id="launchbutton"+href="#launchbutton">+Launch+demo+modal+</a>|code-block|syntax|javascript|2969232|这将使按钮保持在屏幕上。|2969233|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>If pstenstrm's answer doesn't work for you, try combining it with this replacement button HTML:</p>

<pre><code>&lt;a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#generalModal" id="launchbutton" href="#launchbutton"&gt; Launch demo modal &lt;/a&gt;
</code></pre>

<p>This should keep the button on-screen.</p>


<p>I have a problem, with a modal. I have a button on a page, that toggles the modal. When the modal shows up, the page jumps to top.</p>

<p>I have done everything I could to find a solution/etc, but I am really lost.</p>

<p><strong>EDIT:</strong></p>

<p>I have also tried with: <code>$('#myModal').modal('show');</code> but it has the exact same effect.</p>


Bootstrap modal: background jumps to top on toggle

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个问题，一个模态的问题。我在页面上有一个按钮，可以切换模式。当模式显示时，页面会跳转到顶部。我已经做了所有我能找到的解决方案，但是我真的迷失了方向。编辑：我也尝试过：$('#myModal').modal('show');，但它有完全相同的效果。

问Bootstrap模式:切换时背景跳到顶部
EN

回答 31

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap模式:切换时背景跳到顶部EN

回答 31

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap模式:切换时背景跳到顶部
EN