323

私はここの投稿、Bootstrapサイト、そしてグーグルが狂ったように読んだことがありますが、簡単な答えであると確信しているものを見つけることができません...

私は次のようなlink_toヘルパーから開くBootstrapモーダルを持っています：

<%= link_to "New Contact", new_contact_path, {remote: true, 'data-toggle' => 'modal', 'data-target' => "#myModal",  class: "btn btn-primary"} %>

私のアクションでは、作成してからに渡すContactsController.createコードがあります。には、エラー処理コード（rubyとjavascriptの組み合わせ）があります。すべてがうまくいけば、モーダルを閉じたいと思います。Contactcreate.js.erbcreate.js.erb

これは私が問題を抱えているところです。すべてがうまくいくとき、私はモーダルを却下することができないようです。

試しました$('#myModal').modal('hide');が、効果はありません。$('#myModal').hide();また、モーダルを却下するが背景を残す方法も試しました。

モーダルを閉じる方法、および/または背景を内部から閉じる方法に関するガイダンスはありますcreate.js.erbか？

編集

myModalのマークアップは次のとおりです。

<div class="modal hide" id="myModal" >
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Add Contact</h3>
    <div id="errors_notification">
    </div>
  </div>
  <div class="modal-body">
    <%= form_for :contact, url: contacts_path, remote: true do |f| %>  
      <%= f.text_field :first_name, placeholder: "first name" %>
      <%= f.text_field :last_name, placeholder: "last name" %>
      <br>
      <%= f.submit "Save", name: 'save', class: "btn btn-primary" %>
      <a class="close btn" data-dismiss="modal">Cancel</a>
    <% end %>
  </div>
  <div class="modal-footer">
  </div>
</div>
4

25 に答える 25

547

ブラウザウィンドウでモーダルを開いた状態で、ブラウザのコンソールを使用して試してください

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

それが機能する (そしてモーダルが閉じる) 場合は、閉じる Javascript がサーバーからブラウザーに正しく送信されていないことがわかります。

うまくいかない場合は、クライアントで何が起こっているのかをさらに調査する必要があります。たとえば、同じ ID を持つ 2 つの要素が存在しないことを確認します。たとえば、ページの読み込み後、最初は機能しますが、2 回目は機能しませんか?

ブラウザのコンソール: firefox の firebug、Chrome または Safari のデバッグ コンソールなど。

于 2012-05-07T11:55:48.633 に答える
83

ブートストラップモーダルを閉じるには、次のようにモーダルメソッドのオプションとして「非表示」を渡すことができます

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

ここで働くフィドルを見てください

ブートストラップは、モーダル機能にフックできるイベントも提供します。たとえば、モーダルがユーザーから非表示になったときにイベントを発生させたい場合は、hidden.bs.modalイベントを使用できます。モーダル メソッドとイベントの詳細については、こちらを参照してください。ドキュメンテーション

上記の方法が機能しない場合は、閉じるボタンにIDを付けて、閉じるボタンのクリックをトリガーします。

于 2014-06-30T06:09:20.297 に答える
54

Bootstrap 3.4 を使用していますが、これは機能しません

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

必死になって、私はこれをしました：

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

エレガントではないかもしれませんが、うまくいきます

于 2015-04-10T11:30:24.810 に答える
27

このコードを使用できる正しい解決策を見つけました

$('.close').click();
于 2016-01-02T12:34:14.080 に答える
11

同様の問題であると思われるものに遭遇しました。はその$('#myModal').modal('hide');関数を実行している可能性が高く、行にヒットします

if (!this.isShown || e.isDefaultPrevented()) return

問題は、モーダルが表示され、値が true である必要がある場合でも、値 isShown が定義されていない可能性があることです。ブートストラップ コードを次のように少し変更しました。

if (!(typeof this.isShown == 'undefined') && (!this.isShown || e.isDefaultPrevented())) return

これにより、ほとんどの問題が解決されたようです。背景がまだ残っている場合は、 hide 呼び出しの後に手動で削除する呼び出しをいつでも追加できます$('.modal-backdrop').remove();。まったく理想的ではありませんが、機能します。

于 2012-11-01T23:18:33.403 に答える
11

(Bootstrap 3 を参照)、モーダルの使用を非表示にするには: $('#modal').modal('hide'). しかし、背景が（私にとって）ぶら下がっていたのは、「非表示」が完了する前にモーダルの DOM を破棄していたためです。

これを解決するために、隠しイベントを DOM の削除で連鎖させました。私の場合：this.render()

var $modal = $('#modal');

//when hidden
$modal.on('hidden.bs.modal', function(e) { 
  return this.render(); //DOM destroyer
});

$modal.modal('hide'); //start hiding
于 2014-04-29T20:08:47.063 に答える
10

「表示された」コールバックが発生した後に呼び出しを行ったほうが運が良かったです。

$('#myModal').on('shown', function () {
      $('#myModal').modal('hide');
})

これにより、hide() 呼び出しが行われる前にモーダルの読み込みが完了していました。

于 2014-07-17T16:31:18.043 に答える
10

私たちが見つけたのは、サーバー コードへの呼び出しと成功のコールバックに戻るまでにわずかな遅延があったことです。$("#myModal").on('hidden.bs.modal', function (e)サーバーへの呼び出しをハンドラーでラップしてから$("#myModal").modal("hide");メソッドを呼び出した場合、ブラウザーはモーダルを非表示にしてからサーバー側のコードを呼び出します。

繰り返しますが、エレガントではありませんが機能的です。

 function myFunc(){
        $("#myModal").on('hidden.bs.modal', function (e) {
            // Invoke your server side code here.
        });
        $("#myModal").modal("hide");
 };

ご覧のとおり、myFuncが呼び出されると、モーダルが非表示になり、サーバー側のコードが呼び出されます。

于 2016-09-16T18:28:31.680 に答える
8

モーダルの背景を非表示にすると機能しますが、その後モーダルと背景を開くと、本来のように非表示になりません。これが一貫して機能することがわかりました：

// SHOW
$('#myModal').modal('show')
$('.modal-backdrop').show();

// HIDE
$('#myModal').modal('hide');
$('.modal-backdrop').hide();
于 2020-11-19T15:49:40.420 に答える
6

ドキュメントは次のとおりです。 http://getbootstrap.com/javascript/#modals-methods

メソッドは次のとおりです: $('#myModal').modal('hide')

異なるコンテンツのモーダルを数回開く必要がある場合は、(メイン js に) 追加することをお勧めします。

$('body').on('hidden.bs.modal', '.modal', function () {
      $(this).removeData('bs.modal');
    });

したがって、次のオープニングのためにコンテンツをクリーンアップし、一種のキャッシュを回避します

于 2015-11-06T17:07:44.603 に答える
6

私は同じ問題を経験していましたが、少し実験した後、解決策を見つけました。私のクリック ハンドラーでは、次のように、イベントがバブリングしないようにする必要がありました。

$("a.close").on("click", function(e){
  $("#modal").modal("hide");
  e.stopPropagation();
});
于 2013-07-11T19:51:08.823 に答える
6 
$('.modal-backdrop').hide(); // for black background
$('body').removeClass('modal-open'); // For scroll run
$('#modal').modal('hide');
于 2016-06-06T12:36:07.200 に答える
5

私でさえ、同じような問題を抱えています。これは私を大いに助けました

$("[data-dismiss=modal]").trigger({ type: "click" });
于 2016-10-10T14:30:06.930 に答える
3

イベントのバブリングに注意する必要があります。1行のコードを追加する必要があります

$("#savechanges").on("click", function (e) {
        $("#userModal").modal("hide");
        e.stopPropagation(); //This line would take care of it
    });
于 2015-08-20T12:31:40.840 に答える
2

私はこのコードを使用しました -

フェードアウトを使用して滑らかな効果でモーダルを非表示にします。

$('#myModal').fadeOut();

$('.modal-backdrop').fadeOut();

$('.modal-open').css({'overflow': 'visible'});
于 2019-05-09T19:28:13.947 に答える
2

document.getElementById('closeButton').click(); // モーダルの要素に data-dismiss="modal" 属性を追加し、この id を与えます

于 2020-05-04T20:49:58.843 に答える
-1

これは悪い習慣ですが、JavaScript で閉じるボタンを呼び出すことで、この手法を使用してモーダルを閉じることができます。これにより、3 秒後にモーダルが閉じます。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
window.onload=function()
{
setInterval(function(){ 

$("#closemodal").click();
}, 3000);

}
</script> 
</head>
<body>

   <div class="container">
 <h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal"   data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

    <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
      <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal" id="closemodal">Close</button>
    </div>
  </div>

</div>
</div>

 </div>

</body>
</html>
于 2016-10-07T07:26:49.287 に答える