web-dev-qa-db-ja.com

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

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

私に何ができる？

twitter-bootstrapmodal-dialog
247
paganotti

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

それでもうまくいかない場合は、次のようにしていつでも強制的に解決することができます。

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

モーダル動作を適用するための$.modal()への最初の呼び出しが、意図した以上の要素を渡さないようにしてください。この場合、コレクション内の各要素に対して、backdrop要素を含むモーダルインスタンスを作成することになります。そのため、実際には複製の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）を閉じるとき、それは背景が取り残されたように見えました。

64
gasman

私はこの問題に長すぎる時間を費やしました:)

提供された他の答えは有用で正当ですが、モーダル隠蔽機能をBootstrapから効果的に再現することは私にとって少し面倒なようでしたので、私はよりきれいな解決策を見つけました。

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

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

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

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

これが役に立つことを願っています！

50
Bill Huertas

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

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

31
kampageddon

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

18
Jordan

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

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

それは問題ありません、これで問題は解決します

9
Chaitanya Bankanhal

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

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

$('#myModal').modal('hide')を呼び出す代わりに、あなたのボタンにdata-dismiss="modal"という属性を付けて、あなたの "送信"ボタンに "click"イベントを追加してください。私の問題では、ボタンの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')メソッドはそれほど制御できない方法で振る舞うようです。

お役に立てれば！

9
Dima Gabachov

この問題は、モーダルウィンドウを非表示にしてから再表示しすぎる場合にも発生する可能性があります。これは他のところで質問のために述べられました、しかし、私は以下でもう少し詳細を提供します。

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

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

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

これが、関連するブートストラップ問題トラッカーの投稿です。私が以下にリストしたよりも多くのトラッカー投稿がある可能性があります。

8
Mark F Guerra

.modal（ 'hide'）

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

だから代わりに

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

行う

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

それで、あなたは "hide"イベントが終了するまで必ず待っています。

7
Helmut Hackl

私は同様の問題に遭遇したとしても、私は次の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"プロパティを持つ 'No'ボタンのクリックイベントをトリガーしました。そしてこれはうまくいきました:)

5
Yasser

この問題を引き起こす可能性があるもう1つの考えられる間違い

あなたのページにbootstrap.jsスクリプトを2回以上含めないようにしてください！

4
Webinan

つかいます：

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

出典

4
Jamshid Hashimi

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

3
mindriot

この質問に対する別の視点。 （私は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つだけ削除されるため、背景は消えません。ただし、bootstrap docに示されているようにdata-dismiss="modal" add on htmlを使用すると消えます。

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

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

2
ohm89

アップデートパネルの問題。

私の問題はアップデートパネルの配置が原因でした。私はupdatepanelに全部のモーダルを持っていました。更新パネルの外側でモーダルを宣言し、更新パネルでモーダル本体とだけ言うのであれば、$（ '＃myModalID'）を使用します。働いた。

2
Al Option

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

これは私のために働きました。ポップアップを開くと2つか3つのモーダル背景が表示されるので、閉じていません。そのため、$（ '＃myModal'））を実行すると、modal（ 'hide'）となります。それは1つのモーダル背景のみをもたらし、残りは残ります。

2
Ashhab

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

1
Yash K

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

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

私のモーダルの任意のボタンに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 })
}
1
wendyg

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

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

1
user2707674

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

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

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

1
Nick M

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

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

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

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

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

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

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

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

0
Vin

私はMeteorで働いています、そして私はちょうど同じ問題を受けました。私のバグの原因はこれでした：

{{#if tourmanager}}
    {{>contactInformation tourmanager}}
{{else}}
    <a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
    {{>addArtistTourmanagerModal}}
{{/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}}
0
Scuba Kay

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

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

0
Matthew Andrianakos

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


});
0
Alejandro Quintero

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

問題が修正された方法は、モーダル背景に対処するのに十分な時間をブラウザに与えることでした。 「確認」をクリックした後すぐにアクションを実行するのではなく、ブラウザに500ミリ秒で1番目のモーダルを非表示にして背景などをクリーンアップするように指示してください。

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

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

0
Behnam
//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/

0
Fábio Zangirolami

トップクラスの解決策を適用した後、私はそれが適切に開く将来のモードを壊すという問題を抱えていました。私は自分の解決策を見つけました

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

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

0
JenonD

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

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

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

私は同じモーダルを開くのが速すぎるときにこの問題を抱えていたので、それがすでに表示されているかどうかを簡単に修正してから表示し直しました。

$('#modalTitle').text(...);
$('#modalMessage').text(...);
if($('#messageModal').is(':hidden')){
    $('#messageModal').modal('show');
}
0
shinzou

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

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

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

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

これから そう答え

0
PurTahan

これを試して

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

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

0
A H K

私は同様の問題を抱えていました。 BoostrapをBackboneと組み合わせて使用​​していましたが、[Do it]ボタンのクリックをキャプチャして、それらのイベントの伝播を停止していました。奇妙なことに、これは様相を消したが、背景は消した。 event.preventDefault（）を呼び出してもstopPropagation（）を呼び出さないのであれば、すべてうまくいきます。

0
gischer