Geek Answers Handbook

Set toolbar to show Bootstrap Modal

I had a small problem with a project that uses the bootstrap 2.3.2 framework. Users who ask the toolbar cannot fully view the boot modal, as shown below:

Ask Toolbar Bootstrap Modal

Stages of replication problems. Install the ask toolbar for Google chrome {if not installed), or if it is installed and disabled, enable it. Go to the Getbootstrap documentation site and click the Run demo mod button to open the modal. The modal will be displayed as shown in the screenshot.

Google Chrome introduces an iframe with some CSS for all pages (usually html pages) to display the toolbar, since chrome does not allow displaying as a built-in toolbar. We can disable the toolbar during a window load event using the following jquery function

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

However, when bootstrap modal starts, some data attributes are added by the extension of the ask toolbar to the modular wrapper div, which prevents the modality from being fully displayed.

The data attributes are: <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: -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 the negative style value top and 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

Edit:

completely disable the ask toolbar when accessing the website without forcing the user to disable or remove the toolbar manually? Because the toolbar creates other problems. I set the top bar and jQuery UI hints. Also, using the window.scroll() and scrollTop() function to fix another div next to the top menu bar. if the query toolbar is activated, the scroll method captures the div outside the top panel. In addition, tooltips get 31px of the top margin of the query panel.

EDIT: I can fix the problem by providing .modal.fade.in { top: 10% !important;} hack. But this is not the right way to do this.

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

## Note: this problem occurred in bootstrap ver. 2.3.2. Not verified in version. 3.xx ##

+4
source share
1 answer

Ravi

You can get rid of the inline styles added using the APN toolbar with the following scripts. You must call this script with the modal function shown.

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

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

I could not reproduce this on JSFiddle, since Resa aria is an iframe. Here you can download the working version: https://dl.dropboxusercontent.com/u/30070004/apn-modal/index.html

I also tried removing these attributes, for example:

 $(".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 delete them - the apn toolbar again adds it to the new calculation styles. Therefore, it is better not to delete these attributes, but only the value "TOP".

Tell me your result!

+4
source

More articles:


All Articles