web-dev-qa-db-ja.com

Bootstrap Modal Backdrop Remaining

Bootstrap呼び出しを実行するときにロードするためのモーダルウィンドウを表示AJAX。モーダルウィンドウが表示されます。モーダルを非表示にする場合は、「progress.finish」を選択します。モーダルが表示された後、非常にすばやく非表示になり、モーダル背景が画面に残る特定の条件があります。また、他のモーダルウィンドウが読み込みウィンドウ上に表示される可能性があるため、すべての背景を単純に削除することはできません。 jsfiddle を作成しました（イベントをトリガーする代わりに）.

var loadingModal = $("#loadingModal");

$("#btnShow").click(function () {
   loadingModal.modal("show");
    //hide after 3 seconds
    setTimeout(function () {
        loadingModal.modal("hide");
    }, 3000);
});

$("#btnProblem").click(function () {
   //simulate a loading screen finishing fast, followed by another loading screen
    loadingModal.modal("show");
    loadingModal.modal("hide");
    loadingModal.modal("show");

    //Again simulate 3 seconds
    setTimeout(function () {
        loadingModal.modal("hide");
    }, 3000);
});

そして、HTML：

<div id="loadingModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <p>Loading...</p>
      </div>
    </div>
  </div>
</div>
<button id="btnShow">Show Loading</button>
<button id="btnProblem">Cause show/hide problem</button>

理想的には、私はmodal（ "hide"）を呼び出す前に指定された時間を待たずにこれを解決したいと思います。言い換えれば、私は次のようなことを避けたいと思います：

elem.on("progress.finish", function () {
    window.setTimeout(loadingModal.modal("hide");
}, 750);

また、bootstrap=からhidden.bs.modalイベントとshown.bs.modalイベントをサブスクライブして、必要に応じて要素を表示/非表示しようとしましたが、間違っています...このモーダルの表示/非表示を許可するアイデアはありますか？

javascripttwitter-bootstrap-3
35
Patrick

他の誰かが同様の問題に遭遇した場合に備えて、モーダルから「フェード」クラスを削除すると、モーダルが非表示になった後でもこの背景が画面に貼り付かないことがわかりました。モーダル用のbootstrap.jsのバグのようです。

もう1つ（フェード効果を維持したまま）は、jQueryElement.modalの呼び出しを、「in」クラスを追加し、display：ブロックを設定し、表示時に背景を追加する独自のカスタムjavascriptに置き換えます。モーダルを非表示にします。

私のプロジェクトでは、フェードを取り除くだけで十分です。

52
Patrick

モーダル非表示の後に、色あせた背景が残っており、以下のコードを使用してそれらを強制的に削除できる場所をクリックできません。

まず、モーダルdiv要素を非表示にします。

$('modalId').modal('hide');

次に、本文から「modal-open」クラスを削除し、ページの最後にある「.modal-backdrop」を削除します。

$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
37
Gampesh

他の誰かが同様の問題に遭遇した場合に備えて、フェードを維持したが、data-dismiss="modal" [保存]ボタンに。私のために働く。

29
user2443343

問題は、bootstrap=は背景を非同期に削除することです。したがって、hideとshowをすばやく呼び出しても、背景は削除されません。

解決策（前述）は、'hidden.bs.modal'イベントを使用して、モーダルが完全に非表示になるのを待つことです。 jQuery one を使用して、コールバックを1回だけ実行します。 jsfiddle をフォークして、これがどのように機能するかを示しました。

// wait for the backdrop to be removed nicely.
loadingModal.one('hidden.bs.modal', function()
{
    loadingModal.modal("show");

    //Again simulate 3 seconds
    setTimeout(function () {
        loadingModal.modal("hide");
    }, 3000);
});
// hide for the first time, after binding to the hidden event.
loadingModal.modal("hide");

Bootstrapのコードを調べます：

これは、モーダル非同期を非表示にするものです ：

$.support.transition && this.$element.hasClass('fade') ?
    this.$element
        .one('bsTransitionEnd', $.proxy(this.hideModal, this))
        .emulateTransitionEnd(Modal.TRANSITION_DURATION) :
    this.hideModal()

これにより、遷移がサポートされており、fadeクラスがモーダルに含まれているかどうかがチェックされます。両方がtrueの場合、モーダルを非表示にする前に、フェード効果が完了するのを待ちます。この待機 再び起こる 前 背景を削除する 。

これが、フェードクラスを削除するとモーダル同期が非表示になり（CSSフェード効果が完了するのを待たずに）、reznicによるソリューションが機能する理由です。

このチェック は、背景を追加するか削除するかを決定します。 isShown = trueは同期的に実行されます 。 hideとshowをすぐに呼び出すと、isShownはtrueになり、チェックは前の背景を削除する代わりに背景を追加し、あなたが持っている問題。

25
JibstaMan

回避策は、次のようなものが必要ない場合は背景を完全に非表示にすることです：data-backdrop = ""

<div class="modal fade preview-modal" data-backdrop="" id="preview-modal"  role="dialog" aria-labelledby="preview-modal" aria-hidden="true">
14
DIG

最も簡単で簡単な方法は、data-dismiss属性を使用することです。基本的に、data-dismiss属性はモーダルを閉じ、背景が表示されないようにします。

データ破棄属性の使用方法

必要なのは、モーダルを閉じたい場所に次を追加することだけです。

data-dismiss="modal"

たとえば、ボタンがあり、誰かがボタンをクリックすると、モーダルが閉じます。

<button class="btn btn-info float-right" onclick="foo()" data-dismiss="modal">Save changes</button>

onClickでJavaScript関数を処理することもできます。これにより、モーダルが閉じられ、JavaScript関数も実行されます。

これは、data-dismiss属性を使用して行うのに最適なアプローチです。

6
amitsin6h

これは私のために働いたものです-

_hidden.bs.modal_イベントが発生すると、jQueryの.remove()関数は_.modal-backdrop_クラスを持つ要素を削除できます。したがって、モーダルが閉じられるたびに、modal-backdropはremovedになります。

_//setting callback function for 'hidden.bs.modal' event
$('#modal').on('hidden.bs.modal', function(){
  //remove the backdrop
  $('.modal-backdrop').remove();
})
_

幸運を。

4
Akash

モーダルからクラス「フェード」を削除するだけです

3
reznic

要素を検査した後、divとmodal-backdropクラスは、ブラウザの[戻る]ボタンを押した後も残っているため、単純に削除します。

$(window).on('popstate', function() {
    $(".modal-backdrop").remove();
});
3
leona

別の可能性のあるケース（私の場合）-モーダルHTMLをDOMに動的に追加しており、さらに1つのルートノードが含まれています。ここでの注意点は、コメントノードもカウントされるため、bootstrap site-からテンプレートをコピーした場合。

2
Ivan Koshelev

このコードを使用して、モーダルを完全に削除します。

 $('.modal').remove();
 $('.modal-backdrop').remove();
 $('body').removeClass( "modal-open" );
1
Varinder Singh Baidwan

これを追加：
 $（ "。modal-backdrop"）。hide（）;
コントローラのng-クリック機能を使用して、フェードイン背景が維持されないようにします。

1
Raj

2番目の回答で述べたように、{data-dismiss = "modal"}を追加することに注意してください。コントローラースコープで定義された関数を使用してAngulars ng-commitを使用する場合、最初にデータ破棄が実行され、コントローラースコープで定義された関数は呼び出されません。私はこれを理解するために1時間を費やします。

0
Oliver S.

モーダルを開くボタンに属性としてdata-backdrop="false"オプションを追加します。

削除する方法bootstrapモーダルオーバーレイ？

0
SingeRoi

以下のイベントを作成するだけです。私の場合、Angularを使用する場合は、NgOnInitに入れてください。

let body = document.querySelector('.modal-open');
body.classList.remove('modal-open');
body.removeAttribute('style');
let divFromHell = document.querySelector('.modal-backdrop');
body.removeChild(divFromHell);
0
Wellington Silva

同じ問題が発生しました。解決策は、クリックするボタンにプロパティdata-dismiss="modal"を追加することです。

0
deepak pudi

私が抱えていた（誰かを助けるかもしれない）問題は、単にModalをロードするためにパーシャルを使用していたことでした。

<li data-toggle="modal" data-target="#priceInfoModal">
<label>Listing Price</label>
<i class="fa fa-money"></i>
@Html.Partial("EditPartials/PriceInfo_Edit")
</li>

同じリストアイテム内に部分呼び出しを配置し​​たため、data-target = "＃priceInfoModal"とdiv id = "priceInfoModal"が同じコンテナにあったため、モーダルを閉じることができませんでした。

0
sam80e

したがって、domオブジェクトでフェードやいじくりを削除したくない場合は、ショーが終了するのを待つだけです。

$('#load-modal').on('shown.bs.modal', function () {
    console.log('Shown Modal Backdrop');
    $('#load-modal').addClass('shown');
});

function HideLoader() {
    var loadmodalhidetimer = setInterval(function () {
        if ($('#load-modal').is('.shown')) {                
            $('#load-modal').removeClass('shown').modal('hide');
            clearInterval(loadmodalhidetimer);
            console.log('HideLoader');
        }
        else { //this is just for show.
            console.log('Waiting to Hide');
        }
    }, 200);
}

IMO Bootstrapはすでにこれを行っているはずです。おそらくもう少し、ショーを実行せずにhideを呼び出すことができる場合は、show.bsに少し追加することをお勧めします。モーダルは、クラス 'showing'を追加し、ループに入る前にタイマーがショーが意図されていることを確認することを確認します。

0
Tod

以下のコードを使用すると、モーダルを開いたり閉じたりするたびに、body要素に連続して7pxのパディングが追加されます。

$('modalId').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();`

まだBootstrap 3を使用している場合は、ハックのような回避策があります。

$('#modalid').modal('hide');
$('.modal-backdrop').hide();
document.body.style.paddingRight = '0'
document.getElementsByTagName("body")[0].style.overflowY = "auto";
0
onhax