Question

我正面临一个使用bootstrap 2.3.2框架的项目的问题。拥有ask toolbar的用户无法完全看到bootstrap模式，如下面给出的屏幕截图所示：

Ask Toolbar Bootstrap Modal

复制问题的步骤。安装Google Chrome的问询工具栏{如果未安装），或者如果安装和禁用，请启用它。转到Getbootstrap documentation website并单击启动演示模式按钮以打开模态。模式将显示如屏幕截图所示。

谷歌浏览器正在向所有页面（通常是html页面）注入带有一些css的iframe，以显示工具栏，因为chrome不允许显示为内置工具栏。我们可以使用以下jquery函数

在窗口加载事件上禁用工具栏

    $(window).load(function () {
        $('.apn-toolbar').remove();
        $('#apn-body-style').remove();
    });

然而，在启动bootstrap模式时，一些数据属性被ask工具栏扩展添加到模式包装div中，这阻止了完全显示模态。

数据属性如下：<div id="myModal" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block; top: -138px;" data-apn-tb_demo_v7-toolbar_set="top" data-apn-tb_demo_v7-toolbar_set_top="undefined" data-apn-toolbar-adjusted="-138px">而不是<div id="myModal" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;">

如何从模态中删除样式top负值和data-apn-tb_demo_v7-toolbar_set="top" data-apn-tb_demo_v7-toolbar_set_top="undefined" data-apn-toolbar-adjusted="-138px"或

修改：

在访问网站时完全禁用询问工具栏而不强制用户手动禁用或卸载询问工具栏？ 因为工具栏也会产生一些其他问题。我修复了顶部栏和jquery UI工具提示。此外，使用window.scroll() and scrollTop()函数修复顶部菜单栏旁边的另一个div。如果激活了工具栏，则滚动方法会将div固定到顶部栏之外。此外，工具提示获得了问题工具栏的上边距的31px。

编辑：我可以通过提供.modal.fade.in { top: 10% !important;}黑客来解决问题。但这不是正确的方法。

要为Chrome安装ASK工具栏，请转到http://apnstatic.ask.com/static/toolbar/everest/download/index.html?source=sp和单击“下载工具栏”按钮。下载后，您可能需要手动运行该应用程序。最后重新启动chrome或查看chrome wrench下的菜单链接（右上方的菜单）以激活工具栏。

##注意：此问题存在于bootstrap ver中。 2.3.2。没有经过测试。 3.x.x ##

Answer 1

拉维，

您可以使用以下脚本删除通过APN工具栏添加的内联样式。您必须在模态显示函数上调用此脚本。

$('#myModal').on('shown', function () {
  $(".modal").css("top", "");
})

将null（“”）值传递给“TOP”CSS属性，jQuery将从给定的选择器中删除它。

我无法在JSFiddle上复制这个，因为结果aria是iframe。在这里，您可以下载工作版本：https://dl.dropboxusercontent.com/u/30070004/apn-modal/index.html

我也尝试删除这些属性，例如：

$(".modal").removeAttr("data-apn-toolbar-adjusted data-apn-tb_demo_v7-toolbar_set data-apn-tb_demo_v7-toolbar_set_top");

但是一旦删除这些 - apn工具栏再次添加新计算的样式。因此最好不要删除这些属性，而只删除“TOP”值。

让我知道你的结果！

询问工具栏是否阻止Bootstrap Modal显示

1 个答案: