ブートストラップ 2.3.2 フレームワークを使用するプロジェクトで少し問題に直面しています。ツールバーに質問があるユーザーは、以下のスクリーンショットのように、ブートストラップ モーダルを完全に表示できません。
問題を再現する手順。Google chrome の ask ツールバーをインストールするか (インストールされていない場合)、インストールされていて無効になっている場合は有効にします。Getbootstrapドキュメント Web サイトに移動し、[デモ モーダルの起動] ボタンをクリックしてモーダルを開きます。スクリーンショットに示すように、モーダルが表示されます。
Google Chrome は、すべてのページ (通常は html ページ) に css を含む iframe を挿入して、組み込みのツールバーとして表示できないため、ツールバーを表示します。次のjquery関数を使用して、ウィンドウロードイベントでツールバーを無効にすることができます
$(window).load(function () {
$('.apn-toolbar').remove();
$('#apn-body-style').remove();
});
ただし、ブートストラップモーダルの開始時に、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"
モーダルから取り除く方法または
編集:
ユーザーが手動でaskツールバーを無効にしたりアンインストールしたりせずに、Webサイトにアクセスしているときにaskツールバーを完全に無効にしますか?
ツールバーは他の問題も引き起こしているためです。トップバーと jquery UI ツールチップを修正しました。また、window.scroll() and scrollTop()
関数を使用して、トップ メニュー バーの横にある別の div を修正します。ツールバーに尋ねるが有効になっている場合、スクロール方法はdivをトップバーに固定しています。また、ツールチップは、ask ツールバーの上マージンの 31px を取得しています。
編集:.modal.fade.in { top: 10% !important;}
ハックを与えることで問題を解決できます。しかし、それは適切な方法ではありません。
Chrome 用の ASK ツールバーをインストールするには、http://apnstatic.ask.com/static/toolbar/everest/download/index.html?source=spにアクセスし、[ツールバーのダウンロード] ボタンをクリックします。ダウンロード後、アプリケーションを手動で実行する必要がある場合があります。最後に、クロムを再起動するか、クロム レンチ (右上のメニュー) の下にあるメニュー リンクを参照して、ツールバーをアクティブにします。
## 注: この問題は、ブートストラップ バージョンに存在していました。2.3.2. バージョンではテストされていません。3.xx ##