web-dev-qa-db-ja.com

Bootstrap 3モーダルをプログラムで閉じる方法AJAX成功？

私がやりたかったことは、ajaxの成功時にモーダルを閉じることです。これは私のコードです：

script

_success: function() {
    console.log("delete success");
    $('#deleteContactModal').modal('hide');
    $( "#loadContacts" ).load( "/main/loadContacts" );

}
_

html

_<div class="modal fade" id="deleteContactModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
<!--everything goes here -->
    </div>
  </div>
</div>
_

コード$('#deleteContactModal').modal('hide');がトリガーされた場合を除いて、すべてが正常に機能し、次のような黒い色あせた画面が表示されます。

enter image description here

モーダルは閉じますが、黒い色あせた色がまだ残っています。ここで何か不足していますか？前もって感謝します。

bootstrap 3.3を使用しています。

javascriptjqueryajaxtwitter-bootstraptwitter-bootstrap-3
14
wobsoriano

モーダルdivでこの属性を追加してみてくださいaria-hidden="true"

例えば：

<div aria-hidden="true" class="modal fade" id="deleteContactModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

これは私の作業例です

<div class="modal fade" id="copy_course_modal" tabindex="-1" role="dialog" aria-labelledby="copycourse" aria-hidden="true">
    <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="purchaseLabel">Copy Chapter</h4>
                </div>
                <div class="modal-body">
                Modal body content here
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="saveCopiedCourse()">Copy Course</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
</div>

そして成功すると同じことをします。

$("#copy_course_modal").modal('hide');
11
Qazi

私はまったく同じ問題を抱えており、動作するように見つけることができる唯一の方法は、モーダルが生成している部分を個別に削除することです。この関数をあなたのjsに入れて、あなたのボタンであなたのhtmlまたはjsのonclickイベントを作成してください。私が助けてくれたことを願っています。

function hideModal(){
  $(".modal").removeClass("in");
  $(".modal-backdrop").remove();
  $('body').removeClass('modal-open');
  $('body').css('padding-right', '');
  $(".modal").hide();
}
9
Vaios P.

私も同じような状況でこの問題に遭遇しました。

Javascript + bootstrapアニメーションの非同期性に関連しているようです。

これはダーティでダーティなハックですが、「hide」への呼び出しをタイムアウトにラップすると、私にとってはうまくいきました。

setTimeout( function(){$("#myModal").modal('hide')}, 300 );

この「解決策」を使用して問題を解決する場合は、タイムアウト値を調整する必要があります。 Bootstrapアニメーションは約125〜200ミリ秒かかるようです。そのため、300はニース安全バッファーを提供します。

6
Steven Smith

試してください：

$(".modal.in").modal("hide");

これにより、現在アクティブなモーダルが非表示になります。

6
WhoAmI
$('#deleteContactModal').modal('hide')

このリンクを見つける

https://getbootstrap.com/docs/3.3/javascript/#modal-hide

モデルウィンドウに関する詳細 https://getbootstrap.com/docs/3.3/javascript/#modal-hide

4
Jasmeen

これは単にタイミングの問題です。フェードアニメーションには時間がかかり、JavaScriptはそれを閉じることができません。フェードアニメーションをキャンセルするだけで正常に動作します。

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

（class = "modal fade"、jus class = "modal"は使用しないでください）

1
Caravansary

私は提案された解決策のいくつかを試しました、そして私のために働いた唯一のものは：

$（ "。modal.in"）。modal（ 'hide'）;

一部のユーザーはモーダルと背景をクリアしましたが、その後の呼び出しで再表示されませんでした。

1
eric gilbertson
$.ajax({
    type: "POST",
    url: "admin/pc-item-insert.php",
    data: $(this).serialize(),
    success: function(data) {
        $("#showinfo").html(data);
        $(".modal").modal("hide");                  
    },
});
1
Al Shahirar

プログラムでダイアログの閉じるボタンをクリックするだけです。

$（ "button [data-dismiss = \" modal\"]"）。click（）;

これにより、ダイアログが自動的に閉じます。

1
paraguma

私は自分のモーダルを定義します：

<div class="modal fade" aria-hidden="true" role="dialog" id="modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button id="btnCloseModal" hidden type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <strong>Waiting</strong>
            </div>
            <div class="modal-content">
                <div>
                    Please don't close your tab!
                </div>
                <div class="d-flex justify-content-center">
                    <div class="spinner-border" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <strong>Loading...</strong>
            </div>
        </div>
    </div>
</div>

次に、関数を作成します：

  var StopLoadingAnimation = function () {
$('#modal').on('show.bs.modal', function (e) {
    console.log("trigger show");
    $("#btnCloseModal").trigger("click");
});
$('#modal').on('shown.bs.modal', function (e) {
    console.log("trigger");
    $("#btnCloseModal").trigger("click");
});
$('#modal').on('hidden.bs.modal', function (e) {
    console.log("event");
    $(e.currentTarget).off('shown');
    $(e.currentTarget).off('show');
});
$("#btnCloseModal").trigger("click");
}

私の考えは、ajaxの成功後に関数StopLoadingAnimationを呼び出し、要素btnCloseModalでイベントクリックをトリガーするものです（モーダルを閉じるときにボタンbtnCloseModalをクリックするのと同じです）

0
TrungNgo

背景をクリアするには

$(".modal-backdrop").toggleClass("hide, show");

bs4でテスト済み

0
gondwe

モーダルフェードを使用しないと言ったものを除いて、これらのオプションはどれも私にとってはうまくいきませんでした。しかし、モーダルフェードを使いたかった。私のコードは変更を保存するためにajax呼び出しを行っていましたが、成功するとこれを実行しました：

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

問題は、doRefreshがモーダルでページを更新していたことでした。 doRefreshを削除した場合、機能しました。だから私がやったことはこれでした：

$('#myModal').modal('hide');
setTimeout(doRefresh, 500);
0
Philip Johnson

この問題は、モーダルの個々の要素を非表示にすることで解決します。といった ：

 $("#modal").modal('hide');  
 $('body').removeClass('modal-open');
 $(".modal-backdrop").remove();
0
Zoha Irshad