275

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

私に何ができる？

4

38 に答える 38

585

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

それが機能しない場合は、次の手順を実行することで、いつでも強制的に削除できます。

$('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
于 2012-07-18T15:26:22.330 に答える
66

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

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

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

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

于 2013-09-11T13:49:50.980 に答える
52

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

提供された他の回答は有用で有効ですが、Bootstrapからモーダル非表示機能を効果的に再現することは私には少し厄介に思えたので、よりクリーンな解決策を見つけました。

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

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

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

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

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

于 2013-11-20T23:41:26.253 に答える
39

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

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>

このdata-attrを入力すると、.modal-backdropは表示されません。このリンクのドキュメント：http：//getbootstrap.com/javascript/#modals-usage

于 2015-05-21T12:09:06.520 に答える
25

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

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

それだけです、これで問題は解決するはずです

于 2018-01-02T19:20:08.343 に答える
20

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

于 2015-06-15T17:42:36.023 に答える
9

同様の問題が発生しました。モーダルウィンドウに、[キャンセル]と[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要素）がブートストラップモーダルを閉じる必要があることを示す唯一の方法であるように思われます。この.modal('hide')メソッドは、完全に制御可能な方法では動作しないようです。

お役に立てれば！

于 2013-03-19T10:09:21.320 に答える
9

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

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

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

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

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

于 2016-04-21T16:50:57.020 に答える
9

.modal（'hide'）

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

だから代わりに

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

行う

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

したがって、「非表示」イベントが終了するまで必ず待機してください。

于 2016-04-27T10:26:00.127 に答える
7

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

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

于 2015-10-04T09:46:50.183 に答える
5

同様の問題が発生した場合でも、次の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"。そしてこれはうまくいきました:)

于 2013-08-31T07:35:28.160 に答える
5

使用する：

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

ソース

于 2013-11-26T07:10:08.807 に答える
4

$（'＃myModal'）。trigger（'クリック'）;

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

于 2018-01-17T09:03:47.673 に答える
3

このソリューションは、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に感謝します。

于 2014-05-21T04:21:36.993 に答える
3

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 })
}
于 2017-05-24T21:47:38.070 に答える
3

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

        element.on("shown.bs.modal", function () {
            if ($(".modal-backdrop").length > 1) {
                $(".modal-backdrop").not(':first').remove();
            }
            element.css('display', 'block');
        });
于 2018-05-02T12:42:16.907 に答える
2

updatepanelの問題。

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

于 2014-02-04T15:38:12.467 に答える
2

この質問に対する別の見方。（私は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"、ブートストラップドキュメントのshowとしてadd on htmlを使用すると、表示されなくなりました。

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

あなたが私と同じ問題に遭遇した場合、これが役立つことを願っています。

于 2016-01-14T17:08:39.487 に答える
2

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

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

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

于 2016-07-28T15:34:03.317 に答える
1

.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"）;

于 2013-12-13T02:18:51.750 に答える
1

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

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

于 2014-02-19T08:38:46.710 に答える
1

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

于 2016-09-04T02:01:50.627 に答える
1

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

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

于 2016-09-08T14:30:53.020 に答える
1

私にとって、最良の答えはこれです。 

<body>
<!-- All other HTML -->
<div>
    ...
</div>

<!-- Modal -->
<div class="modal fade" id="myModal">
    ...
</div>

モーダルマークアップの配置 他のコンポーネントがモーダルの外観や機能に影響を与えないように、常にモーダルのHTMLコードをドキュメントの最上位の位置に配置するようにしてください。

このSOの答えから

于 2018-03-13T23:20:11.390 に答える
1

フォームを送信しようとしたときに同じ問題が発生しました。解決策は、ボタンの種類をからに変更してsubmitからbutton、次のようにボタンクリックイベントを処理することでした。

'click .js-save-modal' () {
    $('#myFormId').submit();
    $('#myModalId').modal('hide');
}
于 2018-09-26T18:11:30.503 に答える
0

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

ただし、bootbox.jsを使用していたので、それと関係がある可能性があります。

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

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

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

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

于 2014-11-14T16:18:17.270 に答える
0

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}}
于 2015-10-21T18:35:55.813 に答える
0 
//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');

フィドル-> https://jsfiddle.net/o6th7t1x/4/

于 2016-02-09T22:55:10.827 に答える
0

data-backdrop属性の初期値は次のようになります。

「静的」、「真」、「偽」。

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++;
});


});

于 2016-07-24T19:09:30.343 に答える
0

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

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

<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);

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

于 2016-09-14T23:37:58.473 に答える
0

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

    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal('hide');", true);
    upModal.Update();
于 2016-10-14T11:51:29.633 に答える
0

https://github.com/twbs/bootstrap/issues/19385から

Modalのshow/hideメソッドは非同期です。したがって、次のようなコード：

foo.modal("hide"); bar.modal("show");無効です。表示/非表示が実際に完了するのを待ってから（表示/非表示のイベントをリッスンします 。http： //getbootstrap.com/javascript/#modals-eventsを参照）、showまたはhideメソッドを再度呼び出す必要があります。

同じモーダルを2回開くのが速すぎると、この問題が発生したため、簡単な修正は、すでに表示されているかどうかを確認してから、再度表示しないようにすることでした。

$('#modalTitle').text(...);
$('#modalMessage').text(...);
if($('#messageModal').is(':hidden')){
    $('#messageModal').modal('show');
}
于 2016-10-24T22:04:28.123 に答える
0

これを試して 

$('#something_clickable').on('click', function () {
  $("#my_modal").modal("hide");
  $("body").removeClass("modal-open");
  $('.modal-backdrop').remove();
 });

それは私にとってはうまくいきます。

于 2017-02-27T15:53:51.343 に答える
0

私も同様の問題を抱えていました。BoostrapをBackboneと組み合わせて使用​​していて、[実行]ボタンのクリックをキャプチャして、それらのイベントの伝播を停止していました。奇妙なことに、これによりモーダルは消えましたが、背景は消えませんでした。event.preventDefault（）を呼び出しても、stopPropagation（）を呼び出さない場合、すべて正常に機能します。

于 2017-05-04T18:31:05.107 に答える
0

多くの検索を行った後のこのコード行は、ajaxの成功でモーダルを閉じたいという私の問題を解決しました。

$('#exampleModal').modal('hide');
$("[data-dismiss=modal]").trigger({ type: "click" });

どうもありがとう、マヌエルフェルナンド https://stackoverflow.com/a/27218322/5935763

于 2020-05-06T08:18:33.200 に答える
0

最近私はこの問題を抱えていましたが、ここで提供されている解決策はどれも役に立ちませんでした。または、完全に破壊されたため、再度表示できませんでした。ドキュメントの準備も機能しませんでしたが、機能したのは、次のようなすぐに呼び出される関数ですべてのリスナーをラップしたことです。

$(function () {
    $('#btn-show-modal').click(function () {
        $("#modal-lightbox").modal('show');
    });

    $('#btn-close-modal').click(function () {
        $("#modal-lightbox").modal('hide');
    });
});
于 2020-06-04T23:49:54.677 に答える
0

他の答え（有用で有効な）を簡単に適用できない場合があります。次に、考えられる回避策は、モーダルダイアログが消えた直後にモーダル背景のクリックをトリガーするイベントを実装することです。

次のモーダルダイアログに基づく例を次に示します。

<div class="modal fade ..." id="IdOfMyModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
...
</div>

モーダルをクリックしたときに「モーダル背景入力」（画面に背景の不透明度を作成する）を削除するには、次のコードを追加します。

$('#IdOfMyModal').on("click", function() {
    setTimeout(function() {
        if ($('#IdOfMyModal').css("opacity") != "1")
            $('.modal-backdrop').trigger('click');
    }, 100);
});
于 2021-08-28T05:13:40.737 に答える
0

すべての答えを調べた後、私は包括的な解決策を思いつきました。結局、これが私のために働いた唯一のものです。（バニラJavaScript）：

            var elem = document.querySelectorAll('[data-dismiss="modal"]')[0];
            var evt = new Event('click');
            elem.dispatchEvent(evt);

            var modalelem = document.getElementById('exampleModalCenter');

            var myModal = new bootstrap.Modal(modalelem, { keyboard: false })

            const fade = modalelem.classList.contains('fade');
            if (fade) {
                modalelem.classList.remove('fade');
            }

            myModal.hide();
            myModal.dispose();

            var backdrop = document.getElementsByClassName('modal-backdrop')[0];
            backdrop.style.display = 'none';

            var modalopen = document.getElementsByClassName('modal-open')[0];
            modalopen.classList.remove('modal-open');
            modalopen.style.removeProperty("overflow");\
于 2021-10-11T20:12:59.287 に答える