css Twitter Bootstrap Modal滚动页面上显示

inb24sb2  于 2023-05-02  发布在  Bootstrap
关注(0)|答案(7)|浏览(164)

点击触发Twitter Bootstrap Modal弹出的链接会导致浏览器向上滚动页面。这种情况只发生在Chrome中。
下面是一个演示页面:
http://www.turizmburosu.com/test2.aspx
页面有600行链接,导致页面正文超过窗口高度。如果单击这些链接中的任何一个,它将显示模式对话框。在Chrome中,单击初始视图下方的任何链接都会导致背景页面向上滚动(并不总是完全滚动到顶部)。
我正在使用以下函数来触发模态的显示:

function test(id, imp) {
    $("#modalLabel").html("Header");
    $("#modalBody").html("Body");
    $("#myModal").modal("show");
}

并且链接的形式为:

<a href="" onclick="test();return false;">Test Link ###</a>

我在Chrome 22中看到了这种行为。0.1229.94米
对于为什么会发生这种情况以及如何预防,有什么建议/想法吗?

附加示例

这可以在Twitter Bootstrap文档页面上重新创建。
在页面上,只需覆盖现有的data-api以使用JavaScript api即可:

$('#modals a[data-toggle="modal"]').on('click',
  function(e) {
    $('#myModal').modal('toggle');
    return false
  });

现在点击【启动Demo Modal】按钮,显示Modal时页面会向上滚动。
再次,这是使用Chrome。

rkkpypqq

rkkpypqq1#

修复(10/29/2012)

自Bootstrap v2起已修复此问题。2.0.参见commit e24 b46。...了解详情

(原始答案)

这是由于Twitter Bootstrap Modal实现中的一个bug(截至2.问题的根源在于焦点被设置在模态完成转换之前。这只会在以下情况下发生
1.浏览器支持CSS转换(您正在使用bootstrap-transition。(int n);
1.模态具有类fade;和
1.当焦点被设置到当前视图之外的元素时,浏览器将滚动以将其移动到视图中(例如,例如,Chrome、Safari)。
应该注意的是,这会影响Data API(基于标记)和Programmatic API(基于JS)。然而,当采用编程方法时,它更明显的原因是,与Data API不同,它不会自动将焦点恢复到触发元素,因此,当模态隐藏时,不会向下滚动视图。
更多信息可以在Twitter Bootstrap repo下的Issue #5336: Modal Scrolls Background Content中找到。
A fix has been merged into the 2.1.2-wip branch,现在应该随时可以发布。
下面是一个使用补丁
bootstrap-modal的演示。js**:

JSFiddle

brc7rcf0

brc7rcf02#

同样的问题。这是由中的“#”引起的,锚正在滚动。我通过删除锚标记并放置以下内容来修复此问题:

<span onclick="$('#umisteni_modal').modal('show');" style="cursor:pointer;">Změnit místo dodání</span>
qij5mzcb

qij5mzcb3#

我的网站上也有类似的问题,这是由另一个jquery插件(sidr)引起的。当侧边栏出现时,我打开一个模态窗口,我将被发送回顶部。
在jquery. sidr中。js我将第102-106行从:

// Prepare page if container is body
if($body.is('body')){
scrollTop = $html.scrollTop();
$html.css('overflow-x', 'hidden').scrollTop(scrollTop);
}

收件人:

// Prepare page if container is body
if($body.is('body') && !$('#modal').hasClass('in')){
scrollTop = $html.scrollTop();
$html.css('overflow-x', 'hidden').scrollTop(scrollTop);
}

如果你正在使用这个插件沿着twitter bootstrap的modal,也许这可以帮助你。

ee7vknir

ee7vknir4#

我遇到了同样的问题,因为这些CSS行被认为是在浏览器中永久显示滚动条。删除两行解决了问题:

html,
body {
    min-height: 100%;
    height: 101%;
}
2vuwiymt

2vuwiymt5#

让焦点回到近距离

var triggerOffset=0;
$('.modal').on('show.bs.modal', function() {
    triggerOffset=$(window).scrollTop();
});
$('.modal').on('hidden.bs.modal', function() {
     var animationTime=1;
    $('html, body').animate({
        scrollTop: (triggerOffset)
    }, animationTime);
});
az31mfrm

az31mfrm6#

我一直有这个问题这么长时间,但我的解决方案是删除href从锚标记

<a onclick="test();return false;">Test Link ###</a>

我现在跳不起来了
希望这对将来的人有所帮助

laximzn5

laximzn57#

我在Bootstrap v3中遇到了同样的问题。3.5)并添加以下CSS为我解决了它:

body.modal-open {
  display: inline;
}

相关问题