Twitterブートストラップモーダル背景が消えない

Twitterブートストラップモーダルダイアログを使用しています。ブートストラップモーダルダイアログの送信ボタンをクリックすると、AJAXリクエストが送信されます。私の問題は、モーダル背景が消えないことです。モーダルダイアログは正しく消えますが、代わりに画面に不透明度を作成する「モーダル背景」が残ります。

私に何ができる？

AJAXリクエストを実行するときは、実際のモーダルウィンドウを含むコンテナーを置き換えないようにしてください。これは、Bootstrapが閉じようとすると、そのウィンドウへの参照を見つけられないためです。Ajax完全ハンドラーでモーダルを削除してから、データを置き換えます。

それがうまくいかない場合は、次の方法でいつでも強制的に終了できます。

$('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

$.modal()モーダル動作を適用するための最初の呼び出しで、意図したよりも多くの要素が渡されていないことを確認してください。これが発生すると、コレクション内の各要素に対して、背景要素を備えたモーダルインスタンスが作成されます。その結果、実際に重複の1つを見ているときに、背景が取り残されているように見えることがあります。

私の場合、次のようなコードを使用してオンザフライでモーダルコンテンツを作成しようとしました。

myModal = $('<div class="modal">...lots of HTML content here...</div><!-- end modal -->');
$('body').append(myModal);
myModal.modal();

ここで、終了</div>タグの後のHTMLコメントは、myModalが実際には2つの要素（divとコメント）のjQueryコレクションであることを意味していました。それらの両方は、それぞれ独自の背景要素を持つモーダルに忠実に変換されました。もちろん、コメントから作成されたモーダルは背景から離れて見えないので、実際のモーダル（div）を閉じると、背景が残されているように見えました。

私はこの問題にあまりにも長い時間を費やしました:)

提供された他の回答は役に立ち、有効ですが、Bootstrapからモーダル非表示機能を効果的に再現するのは少し面倒に思えたので、より明確な解決策を見つけました。

問題は、電話をかけたときに発生する一連のイベントがあることです

$("#myModal").modal('hide');
functionThatEndsUpDestroyingTheDOM()

その後、AJAXリクエストの結果として一連のHTMLを置き換えると、モーダル非表示イベントは完了しません。ただし、Bootstrapはすべてが終了したときにイベントをトリガーします。そのため、次のようにフックできます。

$("#myModal").modal('hide').on('hidden.bs.modal', functionThatEndsUpDestroyingTheDOM);

これがお役に立てば幸いです！

これをアクションボタンに挿入します。

data-backdrop="false"

そして

data-dismiss="modal" 

例：

<button type="button" class="btn btn-default" data-dismiss="modal">Done</button>

<button type="button" class="btn btn-danger danger" data-dismiss="modal" data-backdrop="false">Action</button>

このデータ属性を入力すると、.modal-backdropは表示されません。このリンクでそれに関するドキュメント：http : //getbootstrap.com/javascript/#modals-usage

getboostrapサイト自体からHTMLで生成されたセレクターにコピーアンドペーストする場合は、コメント '<！-/.modal->'を必ず削除してください。ブートストラップは混乱し、コメントは2番目のモーダル要素であると考えます。この「2番目の」要素の別のバックドロップを作成します。

私はこれが非常に古い投稿であることを知っていますが、これは役立つかもしれません。これは私による非常に小さな回避策です

$('#myModal').trigger('click');

これで問題は解決します

同様の問題が発生しました。モーダルウィンドウに、「キャンセル」と「OK」の2つのボタンがあります。元々、両方のボタンは$('#myModal').modal('hide')（「OK」で以前にいくつかのコードを実行して）呼び出すことでモーダルウィンドウを閉じ、シナリオは次のようになります。

1. モーダルウィンドウを開く
2. いくつかの操作を行ってから、[OK]をクリックして検証し、モーダルを閉じます
3. モーダルを再度開き、「キャンセル」をクリックして閉じます
4. モーダルを再度開き、[キャンセル]をもう一度クリックします==>背景にアクセスできなくなります！

さて、私の隣のデスクは私の日を救いました：を呼び出す代わりに$('#myModal').modal('hide')、ボタンに属性data-dismiss="modal"を与え、「送信」ボタンに「クリック」イベントを追加します。私の問題では、ボタンのHTML（まあ、TWIG）コードは次のとおりです。

<button id="modal-btn-ok" class="btn" data-dismiss="modal">OK</button>
<button id="modal-btn-cancel" class="btn" data-dismiss="modal">Cancel</button>

そして私のJavaScriptコードでは、

$("#modal-btn-ok").one("click", null, null, function(){
    // My stuff to be done
});

一方、「クリック」イベントは「キャンセル」ボタンに関連付けられていません。モーダルは適切に閉じ、「通常の」ページで再びプレイできるようになりました。実際にはdata-dismiss="modal"、ボタン（またはDOM要素）がBootstrapモーダルを閉じる必要があることを示す唯一の方法であると思われます。.modal('hide')この方法は非常に制御できないように動作するようです。

お役に立てれば！

この問題は、モーダルウィンドウを非表示にしてから再度表示しすぎた場合にも発生する可能性があります。これは他の場所で質問されましたが、以下でさらに詳しく説明します。

問題は、タイミングとフェードトランジションに関係しています。前のモーダルのフェードアウト遷移が完了する前にモーダルを表示すると、この永続的な背景の問題が発生します（モーダルの背景が画面上に残ります）。ブートストラップは明示的に複数のモーダルを同時にサポートしていませんが、非表示にしているモーダルと表示しているモーダルが同じであっても、これは問題のようです。

これが問題の正しい理由である場合、問題を軽減するためのいくつかのオプションを次に示します。オプション＃1は、フェード遷移のタイミングが本当に問題の原因であるかどうかを判断するための迅速で簡単なテストです。

1. モーダルのフェードアニメーションを無効にします（ダイアログから「フェード」クラスを削除します）
2. モーダルのテキストを非表示にして再表示するのではなく、更新します。
3. 前のモーダルの非表示が完了するまでモーダルが表示されないようにタイミングを修正します。これを行うには、モーダルのイベントを使用します。http://getbootstrap.com/javascript/#modals-events

関連するブートストラップ問題トラッカーの投稿をいくつか示します。以下にリストしたものよりも多くのトラッカー投稿がある可能性があります。

• https://github.com/twbs/bootstrap/issues/735
• https://github.com/twbs/bootstrap/issues/2839
• https://github.com/twbs/bootstrap/issues/19385

.modal（ 'hide'）

モーダルを手動で非表示にします。モーダルが実際に非表示になる前（つまり、hidden.bs.modalイベントが発生する前）に呼び出し元に戻ります。

だから代わりに

$('#myModal').modal('hide');
$('#someOtherSelector').trigger('click');

行う

$('#myModal').modal('hide');
$('#myModal').on('hidden.bs.modal', function() {
   $('#someOtherSelector').trigger('click');
});

したがって、「非表示」イベントが終了するまで必ず待つ必要があります。

この問題を引き起こす可能性のある別の考えられる間違い、

bootstrap.jsページにスクリプトを2回以上含めていないことを確認してください。

同様の問題に遭遇しても、次の2つのボタンがありました。

<button id="confirm-delete-btn" >Yes, Delete this note.</button>
<button id="confirm-delete-cancel" data-dismiss="modal">No</button>

いくつかのajax操作を実行したかったので、そのajax操作が成功したら、モーダルを閉じます。これが私がしたことです。

$.ajax({
        url: '/ABC/Delete/' + self.model.get("Id")
            , type: 'DELETE'
            , success: function () {                    
                setTimeout(function () {
                    self.$("#confirm-delete-cancel").trigger("click");
                }, 1200);
            }
            , error: function () {}
        });

data-dismiss="modal"プロパティを持つ「いいえ」ボタンのクリックイベントをトリガーしました。そしてこれはうまくいきました:)

使用する：

$('.modal.in').modal('hide') 

ソース

このソリューションは、Ruby on Rails 3.xと、モーダルを含むDOMの一部を再構築するjs.erbファイル用です。ajax呼び出しがモーダルからのものか、ページの別の部分からのものかに関係なく機能します。

if ($("#my-modal").attr("aria-hidden") === "false") {
  $("#my-modal").modal('hide').on('hidden.bs.modal', function (event) {
    functionThatEndsUpDestroyingTheDOM();
  });
} else {
  functionThatEndsUpDestroyingTheDOM();
}

出発点を@BillHuertasに感謝します。

$（ '＃myModal'）。trigger（ 'click'）;

これでうまくいきました。ポップアップを開いたときに2つまたは3つのモーダル背景がトリガーされるため、閉じません。したがって、$（ '＃myModal'））。modal（ 'hide'）;を実行すると、1つのモーダル背景にのみ影響し、残りは残ります。

updatepanelの問題。

私の問題は、更新パネルの配置が原因でした。更新パネルにモーダル全体が表示されました。更新パネルの外でモーダルを宣言し、更新パネルでモーダル本体と言うだけの場合、$（ '＃myModalID'）。modal（ 'hide'）; 働いた。

この質問に対する別の視点。（私はbootstrap.jsバージョン3.3.6を使用しています）

JavaScriptで手動で両方でモーダルを誤って初期化しました：

$('#myModal').modal({
   keyboard: false
})

とを使用して

data-toggle="modal"

以下の例のようにこのボタンで（ドキュメントに表示）

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

その結果、その2つのインスタンスが作成されます

<div class="modal-backdrop fade in"></div>

モーダルを開くときにHTMLの本文に追加します。これは、関数を使用してモーダルを閉じるときに発生する可能性があります。

$('#myModal').modal('hide');

（上記のように）1つの背景インスタンスのみを削除するため、背景は消えません。しかし、あなたが使うなら、それは消えましたdata-dismiss="modal"、bootstrap docのshowのように、add on html。

したがって、私の問題の解決策は、データ属性を使用せずにJavaScriptで手動でモーダルのみを初期化することdata-dismiss="modal"です。このようにして、手動でモーダルを閉じることも、機能を使用することもできます。

私と同じ問題が発生した場合に役立つことを願っています。

誰かがこれにまだ遭遇した場合の参考までに...私はそれを行う最善の方法が次のとおりであることを発見するために約3時間を費やしました：

$("#my-modal").modal("hide");
$("#my-modal").hide();
$('.modal-backdrop').hide();
$("body").removeClass("modal-open");

モーダルを閉じる関数は非常に直感的ではありません。

data-dismiss="modal"私のモーダルのボタンを追加するのがうまくいきました。ボタンにajax呼び出しを起動する角度で関数を呼び出してモーダルを閉じることを望んでいたので.toggle()、関数内にを追加し、それがうまく機能しました。（私の場合は、使用するbootstrap modalと、いくつかの使用angularではなく、実際のモーダルコントローラ）。

<button type="button" class="btn btn-primary" data-dismiss="modal"
ng-click="functionName()"> Do Something </button>

$scope.functionName = function () {
angular.element('#modalId').toggle();
  $.ajax({ ajax call })
}

私も同じ問題を抱えていました。BootstrapとJQueryUIの競合が原因であることがわかりました。

どちらもクラス "close"を使用します。いずれかでクラスを変更すると、これが修正されます。

非表示の代わりにトグルを使用して、私の問題を解決しました

モーダルコンポーネントに関係のない要素については、他の場所で同じ要素ID /クラスを使用していないことを確認してください。

つまり、クラス名「myModal」を使用してモーダルポップアップをトリガーするボタンを識別する場合は、同じクラス名を持つ無関係な要素がないことを確認してください。

最高評価のソリューションを適用した後、将来のモーダルが適切に開かなくなるという問題がありました。私はうまくいく私の解決策を見つけました

        element.on("shown.bs.modal", function () {
            if ($(".modal-backdrop").length > 1) {
                $(".modal-backdrop").not(':first').remove();
            }
            element.css('display', 'block');
        });

フォームを送信しようとすると、同じ問題が発生しました。ソリューションから、ボタンの種類を変更したsubmitにbuttonして、そのようなボタンのクリックイベントを処理します。

'click .js-save-modal' () {
    $('#myFormId').submit();
    $('#myModalId').modal('hide');
}

.net MVC4プロジェクトでは、Ajax.BeginForm（OnComplete = "addComplete" [余分なコードは削除されました]）内にモーダルポップアップ（ブートストラップ3.0）がありました。「addComplete」javascriptの中に、次のコードを記述しました。これで私の問題は解決しました。

$（ '＃moreLotDPModal'）。hide（）;

$（ "＃moreLotDPModal"）。data（ 'bs.modal'）。isShown = false;

$（ 'body'）。removeClass（ 'modal-open'）;

$（ '。modal-backdrop'）。remove（）;

$（ '＃moreLotDPModal'）。removeClass（ "in"）;

$（ '＃moreLotDPModal'）。attr（ 'aria-hidden'、 "true"）;

私はこれと同じ問題を抱えていました。

しかし、私はbootbox.jsを使用していたので、それと何か関係があるかもしれません。

どちらにしても、親と同じクラスの要素があることが問題の原因であることに気付きました。これらの要素の1つを使用してクリック関数をバインドし、モーダルを表示すると、問題が発生します。

つまり、これが問題の原因です。

<div class="myElement">
    <div class="myElement">
        Click here to show modal
    </div>
</div>

クリックされている要素が親、その子、または他の祖先と同じクラスを持たないように変更します。クリック関数をバインドするときは、これを一般的に行うことをお勧めします。

Meteorを使用していますが、同じ問題が発生しました。私のバグの原因はこれでした：

{{#if tourmanager}}
    {{>contactInformation tourmanager}}
{{else}}
    <a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
    {{>addArtistTourmanagerModal}}
{{/if}}

ご覧のように、elseにモーダルを追加したので、私のモーダルが連絡先情報を更新したときにifには別の状態がありました。これにより、モーダルテンプレートが閉じる直前にDOMから除外されていました。

解決策：if-elseからモーダルを移動します。

{{#if tourmanager}}
    {{>contactInformation tourmanager}}
{{else}}
    <a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
    {{>addArtistTourmanagerModal}}
{{/if}}

//Create modal appending on body
myModalBackup = null;
$('#myModal').on('hidden.bs.modal', function(){
       $('body').append(myModalBackup.clone());
    myModalBackup = null;
});

//Destroy, clone and show modal
myModalBackup = $('#myModal').clone();
myModalBackup.find('.modal-backdrop').remove();
$('#myModal').modal('hide').remove();
myModalBackup.find('.info1').html('customize element <b>1</b>...');
myModalBackup.find('.info2').html('customize element <b>2</b>...');                             
myModalBackup.modal('show');

fiddle-> https://jsfiddle.net/o6th7t1x/4/

data-backdrop属性の初期値は

"static"、 "true"、 "false"。

staticとtrueはモーダルシャドウを追加し、falseはシャドウを無効にするため、最初のクリックでこの値をfalseに変更するだけです。このような：

$(document).on('ready',function(){
	
	var count=0;
	
$('#id-which-triggers-modal').on('click',function(){
		
		if(count>0){
		
			$(this).attr('data-backdrop','false')
		}
		count++;
});


});

モーダル背景画面のフリーズ問題がありましたが、少し異なるシナリオでした。2つの連続したモーダルが表示されていたときです。たとえば、最初は何かをするために確認を求め、「確認」ボタンがクリックされた後、アクションはエラーに遭遇し、2番目のモーダルが表示されてエラーメッセージがポップアップされます。2番目のモーダル背景で画面がフリーズします。要素のクラス名やIDに衝突はありませんでした。

この問題が修正されたのは、ブラウザにモーダル背景を処理するための十分な時間を与えるためです。「確認」をクリックした直後にアクションを実行する代わりに、ブラウザに500ミリ秒で最初のモーダルを非表示にして背景をクリーンアップするように言ってから、エラーモーダルを表示することになるアクションを実行します。

<button type="button" class="btn btn-red" data-dismiss="modal" on-tap="_dialogConfirmed">Confirm</button>
...

_dialogConfirmed（）関数には次のコードがあります。

    var that = this;

    setTimeout(function () {
      if (that.confirmAction) {
        (that.confirmAction)();
        that.confirmAction = undefined;
      }
    }, 500);

他の解決策はブラウザに必要なクリーンアップ時間を与えるのに十分な余分な時間がかかったため、うまくいったと思います。

ASP.NETで、jqueryコマンドの後にコードビハインドでUpdatePanelの更新を追加します。例：

    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal('hide');", true);
    upModal.Update();