Bootstrap模态：背景在切换时跳到顶部

时间：2014-02-06 13:42:51

标签： javascript jquery css twitter-bootstrap twitter-bootstrap-3

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

我已尽我所能找到解决方案/等，但我真的迷路了。

修改

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

32 个答案:

答案 0 :(得分：157)

当模态打开时，modal-open类设置为<body>标记。此类将overflow: hidden;设置为正文。将此规则添加到样式表以覆盖bootstrap.css样式：

body.modal-open {
    overflow: visible;
}

现在滚动应该保持原位。

答案 1 :(得分：24)

如果您使用标记调用模态。尝试从href属性中删除“＃”。并使用数据属性调用模态。

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

答案 2 :(得分：10)

$('the thing you click on').click(function ($e) {
            $e.preventDefault();
});

这将帮助您停止顶部的滚动条。它对我有用

答案 3 :(得分：8)

如果您使用锚标记作为href="#"并且 using System.Reflection; ... var fields = typeof(Person) .GetFields(BindingFlags.Instance | BindingFlags.Public | BindingFlags.NonPublic) .Select(field => field.Name); Console.Write(string.Join(Environment.NewLine, fields)); 正在创建问题，请删除它。 您可以阅读here

以上的内容

答案 4 :(得分：4)

我没有看到具体错误，但我会建议您check your html syntax。

使用您的来源进行微小测试会给我带来错误，例如

  

第127行，第34栏：未结算的元素div。

              <div class="inner onlySides">

这可能是一个问题。

答案 5 :(得分：4)

可能使用嵌套在代码中某处的模态：

body.modal-open {
    overflow: visible;
    position: absolute;
    width: 100%;
    height:100%;
}

对我而言，这是位置，身高和溢出的组合。

答案 6 :(得分：3)

我尝试在我的localhost上复制这个问题并且看起来很奇怪，但是你正在使用的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="//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文件进行比较。

答案 7 :(得分：3)

我试图在屏幕中央设置.modal top。 

.modal {
    position: absolute;
    top: 50%;
}

只是我的两点想法。

答案 8 :(得分：2)

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

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

答案 9 :(得分：2)

在bootstrap 3.1.1中，我用这个解决方案解决了：

body.modal-open {
    position: absolute !important;
}

答案 10 :(得分：2)

删除 href="#" 在我的情况下绝对解决了

答案 11 :(得分：2)

尝试使用它来打开模态，看看会发生什么：

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

答案 12 :(得分：2)

在div之前或<div id="footer"> div之前，您还有2个额外的结束<div id="mainFrame" class="group">标记。我正在使用visual studio 2012 express来检查这个。

请删除这两个额外的div，让我们知道它是如何工作的。我删除了额外的div并删除了所有自定义脚本。仅在页脚中保留了jquery核心和引导程序。这是最终输出的截然。 here是适合你的jsbin游乐场，工作正常。

我建议您使用 headjs 加载所有脚本和css文件。也不是两次加载任何脚本的好习惯。

enter image description here

答案 13 :(得分：1)

如果您在Angular程序中遇到此问题，请在.scss文件的第一行添加以下代码。

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

答案 14 :(得分：0)

我尝试了所有上述示例-这是唯一对我有用的东西：

.modal-open {

            padding-right: 0 !important;

        }

从模型的右侧侧移除填充物-防止跳跃。

答案 15 :(得分：0)

高度：100％是解决问题，但您必须添加正确的“ div”

答案 16 :(得分：0)

我也遇到了同样的问题。每当模态弹出窗口打开时，页面就会滚动到顶部。我四处寻找并尝试了上面提到的所有想法，但没有一个真正对我有帮助。除了带有 body.modal-open css 的那个。

所以我加了

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

这是我的 CSS 文件，它解决了滚动到顶部的问题，但它向页面添加了 2 个滚动条，为此我提供了一个实际添加 CSS 的解决方案strong> 到 HTML 标签本身。我不知道编码是否合乎道德，但我们是设计师，我们可以为 HTML 标签提供样式，所以我做到了。我添加了一些 jquery

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

用于切换 HTML 的滚动条，它对我有用。

答案 17 :(得分：0)

我花了几个小时在这里和其他地方尝试一切。对于angularjs-material的用法，事实证明我不得不在uibModal.open配置对象arg上禁用动画。

例如：

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

希望这对其他人有帮助。

答案 18 :(得分：0)

我遇到了同样的问题，没有答案能帮助我。找到了一个看起来很愚蠢的解决方法，但至少在我看来是有效的。

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

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

答案 19 :(得分：0)

我面临着同样的问题。问题是我在HTML和body元素中添加了.modal-open类。只需将此类添加到正文中，一切就会按预期进行。

答案 20 :(得分：0)

解决跳跃背景的最简单方法是定义两个参数：

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

答案 21 :(得分：0)

我发现这样做更容易：

overflow-y: hidden;

在模式打开时应用于人体类别时-这样可以防止人体在后台垂直滚动，并允许用户停留在同一位置而无需滚动到顶部。

答案 22 :(得分：0)

body.modal-open { position: inherit; }

这对我来说就像一个魅力。

答案 23 :(得分：0)

对于我将更改版本从 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>

答案 24 :(得分：0)

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

答案 25 :(得分：0)

这个人为我做了

body.modal-open {
    overflow: inherit;
    padding-right: 0 !important;
}

答案 26 :(得分：0)

最后想出了这个。 不要将定位模式的按钮包装在锚标记中。

为

<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>

答案 27 :(得分：0)

我有同样的问题，我想我弄清楚了。 您只需将模态HTML作为正文标记的直接子项！您可以将按钮的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>

答案 28 :(得分：0)

我使用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');
}

答案 29 :(得分：-1)

修复它是一个好主意，它看起来像个小玩意！

  

刚好，以您的样式添加了两个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

答案 30 :(得分：-1)

试试这个效果很好

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

答案 31 :(得分：-2)

如果pstenstrm的答案不适合您，请尝试将其与此替换按钮HTML结合使用：

<a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#generalModal" id="launchbutton" href="#launchbutton"> Launch demo modal </a>

这应该让按钮保持在屏幕上。

相关问题
最新问题