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

我正面临一个使用bootstrap 2.3.2框架的项目的问题。有问工具栏的用户无法完全看到bootstrap模态，如下面给出的截图：

询问工具栏引导模式

复制问题的步骤。安装Google Chrome的询问工具栏{如果未安装），或者如果安装和禁用，请启用它。转到Getbootstrap 文档网站，然后单击Launch demo modal按钮打开模式。模式将显示如屏幕截图所示。

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

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

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

数据属性如下：

而不是

如何摆脱样式top负值和data-apn-tb_demo_v7-toolbar_set="top" data-apn-tb_demo_v7-toolbar_set_top="undefined" data-apn-toolbar-adjusted="-138px" from modal or

编辑：

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

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

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

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

拉维

您可以通过以下脚本删除通过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”值。

让我知道你的结果！

Interesting Posts