询问工具栏阻止启动模式显示 [英] Ask Toolbar preventing Bootstrap Modal to show

问题描述

我在使用bootstrap 2.3.2框架的项目中遇到了一些问题。拥有，然后单击启动演示模式 b>按钮打开模式。该模式将显示如屏幕截图所示。

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

$ $ $ window $ .c $ c $（window）.load（function（）{
$（'。apn-toolbar'）。remove（）;
$（'＃apn-body-style'）。remove（）;
}）;

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

数据属性如下：< div id =myModalclass =modal隐藏淡入tabindex = - 1role =dialogaria-labelledby =myModalLabelaria-hidden =falsestyle =display：block; top：-138px; data-apn-tb_demo_v7-toolbar_set =topdata-apn-tb_demo_v7-toolbar_set_top =undefineddata-apn-toolbar-adjusted = - 138px> 而不是< div id =myModalclass =modal hide fade intabindex = - 1role =dialogaria-labelledby =myModalLabelaria-hidden =falsestyle =display：block; >

如何摆脱顶部负值和<$ c从模态或数据数据-apn-toolbar-adjusted = - 138px data-apn-tb_demo_v7-toolbar_set =topdata-apn-tb_demo_v7- toolbar_set_top =undefined p>

编辑：

完全禁用访问网站时询问工具栏而不强制用户禁用或卸载工具栏手动？
因为工具栏也在创建一些其他问题。我已经修复了顶部条和jQuery UI工具提示。此外，使用 window.scroll（）和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扳手下方的菜单链接（右上角的菜单）以激活工具栏。

$ b ##注意：此问题存在于引导程序版本。 2.3.2。未在版本中测试。 3.xx ##

解决方案

Ravi，

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

$ b $

  $（'＃myModal'）。on（'shown'，function（）{
 $（。 modal）。css（top，）; 
}）
  

null（）value toTOPCSS属性，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值。

让我知道你的结果！

I am facing a bit problem with a project which uses bootstrap 2.3.2 framework. Users who has ask toolbar are unable to see bootstrap modal completely as in below given screenshot:

Steps to replicate the issue. Install ask toolbar for Google chrome {if not installed) or if installed and disabled, enable it. Go to Getbootstrap documentation website and click on Launch demo modal button to open the modal. The modal will display as shown in the screenshot.

Google Chrome is injecting an iframe with some css to all the pages (generally, html pages) to display the toolbar as chrome doesn't allow to show as inbuilt toolbar. We can disable the toolbar on window load event using following jquery function

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

However on initiation of bootstrap modal some data attributes being added by the ask toolbar extension, to the modal wrapper div which is preventing to display the modal fully.

The data attributes are as below: <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"> instead of <div id="myModal" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;">

how to get rid of style top negative value and data-apn-tb_demo_v7-toolbar_set="top" data-apn-tb_demo_v7-toolbar_set_top="undefined" data-apn-toolbar-adjusted="-138px" from the modal or

Edit:

completely disable ask toolbar while accessing the website without forcing the user to disable or uninstall ask toolbar manually? Because the toolbar is creating some other problems as well. I have fixed top bar and jquery UI tooltips. Also, using window.scroll() and scrollTop() function to fix another div next to top menu bar. if ask toolbar is activated, the scroll method is fixing the div beyond to the top bar. Also, tooltips are getting 31px of top margin of ask toolbar.

EDIT: I can fix the issue by giving .modal.fade.in { top: 10% !important;} hack. But it is not the proper way to do it.

To install ASK Toolbar for chrome, go to http://apnstatic.ask.com/static/toolbar/everest/download/index.html?source=sp and click on Download Toolbar button. After downloading, you may need to run the application manually. Finally restart chrome or see for a menu link under chrome wrench (menu at right top side) to activate toolbar.

## Note: this issue existed in bootstrap ver. 2.3.2. Not tested in ver. 3.x.x ##

解决方案

Ravi,

You can get rid of inline styles added via APN toolbar with following scripts. You have to call this script on modal shown function.

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

Passing null ("") value to "TOP" CSS property, jQuery will remove that from the given selector.

I couldn't replicate this on JSFiddle as Result aria is iframe. Here you can download working version: https://dl.dropboxusercontent.com/u/30070004/apn-modal/index.html

I tried to remove those attributes as well, like:

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

But as soon as you remove these - apn toolbar again adds it with newly calculated styles. So better not to remove those attributes but only the "TOP" value.

Let me know your result!

这篇关于询问工具栏阻止启动模式显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！