引导模式：背景在切换时跳到顶部

110

我有一个模态问题。我在页面上有一个按钮，用于切换模式。当出现模态时，页面跳至顶部。

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

编辑：

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

javascript  jquery  css  twitter-bootstrap  twitter-bootstrap-3 
— FooBar
source
你好本尼。是的，我反抗。我也尝试过：$（'＃myModal'）。modal（'show'）; 但效果完全一样。
— FooBar
1
这可以帮助您，同样的问题吗：stackoverflow.com/questions/12894570/…– 2014
— 马克
@Mark，请参阅下面的答案...
— Ravimallya 2014年
我注意到，如果我单击模式中的任何位置，window都会触发。这似乎很奇怪，出乎意料。我删除了buttonvia devtools，然后单击页面上的任意位置仍打开了模式窗口。那是想要的行为吗？我想知道您是否没有针对模式点击事件的正确选择器。
— dward

Answers:

174

当模式打开时，将一个modal-open类设置为<body>标签。该课程overflow: hidden;面向身体。将此规则添加到样式表中以覆盖bootstrap.css样式：

body.modal-open {
    overflow: visible;
}

现在，滚动条应保持在原位。

— pstenstrm
source
@pstenstrm，我对此表示怀疑。您告诉您覆盖.modal-open类的CSS。但是，如果还有多余的结束div，并且在我的回答中，我没有在分辨率中覆盖任何类，该怎么办？删除2个额外的div后，它可以正常工作。bs模态添加.modal-backdrop div，由于额外的关闭标签，在需要关闭的地方会感到困惑。
— Ravimallya 2014年
4
对我不起作用，我在iframe中有模态，并且正在滚动到顶部...任何想法？
— Cabuxa.Mapache 2014年
5
这为我解决了。我的问题的根源是“身体{身高：100％}”。
— PeteG
23
不为我工作。我打开了一个香草模式，.modal('show')它仍然滚动到页面顶部。Bootstrap v3.2.0
— MandM 2014年
6
我不得不加入 position: inherit这堂课，但之后又像个魅力。
— adrian3martin
28

如果您正在使用标记调用模式。尝试从href属性中删除'＃'，然后使用数据属性调用模式。

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
— 高汗
source
我确实会像您在此处发布的一样完全打开它。看看链接
— FooBar 2014年
5
如果您不使用“ <button>”而是使用<a>，那么在本例中，当您在对象上移动鼠标光标时，将丢失图标“ finger button”。为了克服这个问题，我这样做了：... href =“＃mai_modal_id” data-toggle =“ modal” ...而且我没有使用数据目标
— pagurix
3
@pagurix-您的评论最适合我的情况。
— AlfredBr
我认为，@ pagurix应该写他的评论作为单独的答案。唯一的帮助。竖起大拇指！
— Vibhor Dube
5

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

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

对我来说，这是位置，高度和溢出的结合。

— 丹尼斯·海登
source
4

我没有看到具体的错误，但我建议您检查HTML语法。

用您的来源进行的微小测试会给我类似以下错误

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

              <div class="inner onlySides">

这可能是一个问题。

— 比利·乔
source
谢谢-我将对此进行调查-尽管我很难相信这可能会触发我遇到的问题。哪一个？
— FooBar 2014年
除了firebug，我不使用插件。在validateator.w3.org上检查页面有效性始终是一件好事。这将是一个问题，因为如果您关闭div，您将有奇怪的行为:)
— billyJoe 2014年
4

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

body.modal-open {
  overflow: visible;
  padding-right: 0 !important;
}
— 尼尔斯
source
3

我尝试在本地主机上复制此问题，看起来好像很奇怪，与您使用的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文件进行比较。

— y
source
3

我试图将.modal顶部设置在屏幕中央。 

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

只是我的2美分想法。

— 霍尔格·蒂博斯
source
足够近。我不会拒绝投票，因为我的问题可能在其他地方，但是这导致屏幕的下半部分变暗，但是模式位于中间。
— 手工艺者
3

在bootstrap 3.1.1中，我使用以下解决方案解决了：

body.modal-open {
    position: absolute !important;
}
— 菲洛
source
2
您保存了我的一天@Filo非常感谢
— vinothini
2

您在div div之前<div id="footer">或之后有2个额外的结束标记<div id="mainFrame" class="group">。我正在使用Visual Studio 2012 Express对此进行检查。

请删除这两个额外的div，并让我们知道其工作原理。我删除了多余的div并删除了所有自定义脚本。在页脚仅保留了jquery核心和引导程序。这是最终输出的画面。 这是为您服务的jsbin游乐场，效果很好。

我建议您使用headjs加载所有脚本和CSS文件。同样，两次加载任何脚本也不是一个好习惯。

在此处输入图片说明

— 拉维马利亚
source
4
否决的答案需要适当的注释，并附有原因。
— Ravimallya 2014年
2

尝试使用此方法打开模式并查看会发生什么：

<a href="#generalModal" class="btn btn-primary btn-lg" data-toggle="modal">
  Launch demo modal 
</a>
— 斯科特洛德
source
2 
body.modal-open {
overflow: visible !important;
}

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

— 头晕
source
这对我有用，pstenstrm的回答中有@MandM的问题（在评论中）：“不适用于我。我有一个用.modal（'show'）打开的香草模式，它仍在滚动到页面顶部。Bootstrapv3.2.0”。唯一的怪异效果是，如果您继续滚动一个比窗口高的模态，那么背景就会滚动，但这对我来说是个小问题。谢谢。
— dgig
1

我在使用Bootstrap 2.3.2时遇到了同样的问题

单击链接是一个问题：

诀窍是：返回false；否则返回false。

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

和js：

function openModal() {
    $('#myModal').modal('show');
}
— 色彩缤纷
source
1

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

例如：

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

希望这对其他人有帮助。

— 内森海滩
source
1

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

::ng-deep {   
     body.modal-open {
          overflow: visible !important;
          position: absolute !important;   
     } 
}
— 西巴香卡熊猫
source
0

我遇到了同样的问题，我想我解决了。您只需要将模式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>
— 努诺阿鲁达
source
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>
— ALF机
source
0

这个为我做了

body.modal-open {
    overflow: inherit;
    padding-right: 0 !important;
}
— 战利品
source
打开模态时，导航栏和容器跳转也遇到了类似的问题。这就是我一直在寻找的东西。
— Awhitey98 '17
很高兴它有所帮助！
— warkitty
0

在几个小时内阅读了数十个答案之后，我再次从引导文件中复制了原始代码，并逐步进行调试，以查看导致我始终跳到顶部的原因。因为实际的最新版本的Bootstrap 3会在您现在所在的位置显示模式。我已经发现，-webkit-transform: translate3d(0,0,0);并height: 100%在我的CSS身体标记导致此行为。也许这可以帮助一些人。

— 亚历克西奥·韦（AlexioVay）
source
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>
— y
source
0

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

.modal-open {

            padding-right: 0 !important;

        }

从模型的右侧删除填充物-防止跳动。

— 斯坦福利
source
0

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

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

var $dummy= $("<div>");
$("body").append($dummy);
$dummy.hide().remove();
— 博兹洛·安德烈（Borzilo Andrey）
source
0

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

— 第666章
source
-1

试试这个，它完美地工作

/* fix body.modal-open overflow:hidden */
body.modal-open {
    height: auto;
}
— 最小化
source
-3

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

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

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

— 本
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.