4

ブートストラップ 2.3.2 フレームワークを使用するプロジェクトで少し問題に直面しています。ツールバーに質問があるユーザーは、以下のスクリーンショットのように、ブートストラップ モーダルを完全に表示できません。

Ask Toolbar ブートストラップ モーダル

問題を再現する手順。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 ##

4

1 に答える 1

4

ラヴィ、

次のスクリプトを使用して、APN ツールバーから追加されたインライン スタイルを取り除くことができます。モーダルに表示された関数でこのスクリプトを呼び出す必要があります。

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

null ("") 値を "TOP" CSS プロパティに渡すと、jQuery は指定されたセレクターからそれを削除します。

結果アリアはiframeであるため、JSFiddleでこれを複製できませんでした。ここで作業バージョンをダウンロードできます: 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」値のみを削除することをお勧めします。

あなたの結果を教えてください!

于 2013-09-28T16:01:50.663 に答える