web-dev-qa-db-ja.com

bootstrapモーダルは表示後すぐに消えます

Railsでブートストラップのモーダルプラグインを使用しています

ウェブサイトには、JavaScriptを記述しなくても機能を取得できると書かれています。

[〜＃〜] html [〜＃〜]（スリム）に次の行を追加します。

div#makeDream.modal.hide.fade 
    div.modal-header
        a.close data-dismiss='modal'
        h3 Hello World!            
    div.modal-body
    div.modal-footer

a data-toggle='modal' data-target='#makeDream' Button

ただし、Buttonをクリックした後。モーダルが表示されますが、すぐに消えます！

#makeDreamのc​​ssが見つかりました

display:none

どこに来ないの

誰かがそれを修正する方法を教えてもらえますか？

jqueryruby-on-railscsstwitter-bootstrap
26
HanXu

この問題があり、解決策は簡単でした... bootstrap.js AND bootstrap-modal.jsの両方をロードしていました。

bootstrap.jsにはbootstrap-modal.jsが含まれます。

解決策：headからbootstrap-modal.jsを削除すると、正常に機能します。

68
Adam

私の場合、モーダルウィンドウを表示してすぐに消える問題は、トグルを2回呼び出したことです。最初に、HTMLファイルのタグで、次にJavaScriptファイルにイベントハンドラーを添付する場合、次のようになります。

<a role="menuitem" tabindex="-1" href="#" data-toggle="modal" data-target="#myModal" id="deleteItemButton">Delete Item</a>

$ultodoListDisplay.on( "click", "#deleteItemButton",  function(){
    $('#myModal').modal('toggle');
});

Bootstrap CDNとスタイルシートへの参照は正しかった。したがって、モーダルウィンドウのトグルを一度だけ定義してください。

4
user3941146

誰かがモバイルサイトでbootstrapモーダルを使用している場合、jquerymobileを使用している可能性があります。もしそうなら、おそらくあなたにbootstrapモーダルが消えるというこの特定の問題に遭遇するでしょう。この問題は、jquerymobileの '.fadein'クラスがbootstrapの '.fadein'クラスをオーバーライドしているため、モーダルウィンドウが非表示になっていることがわかりました。

これを独自の方法で修正することを選択できます。私のアプローチは、jquery mobileのフェードインを実際には使用していなかったので、コメントアウトしました。モーダルダイアログが戻りました。これが誰かを助けることを願っています。 :)

3
Nishant

「bootstrap.min.js」の2つの参照、1つのCDNリンクおよび他のローカルファイルがあり、そのうちの1つにコメントを作成すると、いくつかのドロップダウンメニューが応答しなくなるため、この問題が発生しました

「jQuery Validate Unobtrusive for Bootstrap 3」を更新したところ、問題が解決しました。

1
WasiF

あなたはウェブページの下部にbootstrap-model.jsを追加する必要があります、問題もありました、別のプラグインで試していました、別のプラグインも使用できますが、使用する前にbootstrap-model.jsを考えてください.....

1
saggy

この行の「非表示」クラスを削除してみてください。

div#makeDream.modal.hide.fade

これを読むには：

div#makeDream.modal.fade

また、使用しているBootstrapのバージョンによっては、モーダルを開くボタンを次のように記述する必要があります（htmlに翻訳）：

<a class="btn" data-toggle="modal" data-backdrop="true" data-keyboard="true" href="#makeDream">Open Modal</a>
1
Zheileman

私は同じ問題を抱えていました、私はbootstrap.jsとbootstrap.min.jsの両方が含まれていましたが、そのうちの1つを削除して問題を解決しました

0
Zero

私の場合、モーダルを呼び出すボタンがありました...

<asp:Button ID="btnSearch" runat="server" Width="100%" Text="Select
Action" class="btn btn-info btn-sm" data-backdrop="static"
data-toggle="modal" data-target="#myModalID"></asp:Button>

ボタンをアンカータグに変更し、正常に動作します

<a href="#" ID="btnShowModal" class="btn btn-info btn-sm"
data-backdrop="static" data-toggle="modal" style="width:100%;"
data-target="#myModalID">Select Action</a>

これは、重複するbootstrap javascriptファイル。Bootstrap.min.jsまたはboostrap.jsをロードしていないことを確認した後です。1つで十分です。

0
Lovemore Daka

私の場合、wordpress plugin "wp-jubhunt"および "_tk"テーマを使用しており、両方ともbootstrap.jsをロードしていたので、プラグインでbootstrap.jsを無効にするとうまくいきました。

0
Shahid Chaudhary

私の場合、モーダルは属性で正常に機能していましたが、jsから.modal（ 'show'）を呼び出すと、すぐに非表示になりました。 bootstrap.jsをフッターに入れることで問題は解決しましたが、すべてのcssおよびjquery宣言の後にヘッダーで動作しなかった理由がわかりません。

0
user3872496

bootstrap.min.jsがこの問題を引き起こし、それを削除しても問題が解決します。

jQuery(document).on('click','#SendMail',function(){ 
 jQuery("#fixerrormodal").modal('toggle');   
});

これは助けになります

0
ProgrammerCk

ここでの他の解決策は私を助けませんでした。 laravelにあるブレードフォーム内でモーダルを使用していたことがわかりました。これが、フォームアクションがループのリクエストを送信し、モデルが消える理由です。正常に動作します。

0
Adil Bashir

ボタンまたはアンカータグから_data-toggle="modal"_および_data-target="#myModalID"_属性を削除するだけです。これにより、モーダルが切り替わり、_bootstrap.min._ jsがインポートされました2回以上、切り替えます！

代わりに、ボタンのonClickイベントリスナーを記述し、手動でモーダルをトリガーします：$('#myModal').modal();

0
Simran Sawhney

私は同じ問題を抱えていました、セッション変数に基づいてページをロードすると、モーダルを表示していましたが、$（ '＃myModal'）。modal（ 'show'）を使用すると消えました、問題を使用して解決しましたjquery Triggerメソッド、使用したログインリンク

$(window).load(function(){ $('#loginlink').trigger('click'); });

0
JosephC