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
のcssが見つかりました
display:none
どこに来ないの
誰かがそれを修正する方法を教えてもらえますか?
この問題があり、解決策は簡単でした... bootstrap.js AND bootstrap-modal.jsの両方をロードしていました。
bootstrap.jsにはbootstrap-modal.jsが含まれます。
解決策:head
からbootstrap-modal.jsを削除すると、正常に機能します。
私の場合、モーダルウィンドウを表示してすぐに消える問題は、トグルを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とスタイルシートへの参照は正しかった。したがって、モーダルウィンドウのトグルを一度だけ定義してください。
誰かがモバイルサイトでbootstrapモーダルを使用している場合、jquerymobileを使用している可能性があります。もしそうなら、おそらくあなたにbootstrapモーダルが消えるというこの特定の問題に遭遇するでしょう。この問題は、jquerymobileの '.fadein'クラスがbootstrapの '.fadein'クラスをオーバーライドしているため、モーダルウィンドウが非表示になっていることがわかりました。
これを独自の方法で修正することを選択できます。私のアプローチは、jquery mobileのフェードインを実際には使用していなかったので、コメントアウトしました。モーダルダイアログが戻りました。これが誰かを助けることを願っています。 :)
「bootstrap.min.js」の2つの参照、1つのCDNリンクおよび他のローカルファイルがあり、そのうちの1つにコメントを作成すると、いくつかのドロップダウンメニューが応答しなくなるため、この問題が発生しました
「jQuery Validate Unobtrusive for Bootstrap 3」を更新したところ、問題が解決しました。
あなたはウェブページの下部にbootstrap-model.jsを追加する必要があります、問題もありました、別のプラグインで試していました、別のプラグインも使用できますが、使用する前にbootstrap-model.jsを考えてください.....
この行の「非表示」クラスを削除してみてください。
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>
私は同じ問題を抱えていました、私はbootstrap.jsとbootstrap.min.jsの両方が含まれていましたが、そのうちの1つを削除して問題を解決しました
私の場合、モーダルを呼び出すボタンがありました...
<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つで十分です。
私の場合、wordpress plugin "wp-jubhunt"および "_tk"テーマを使用しており、両方ともbootstrap.jsをロードしていたので、プラグインでbootstrap.jsを無効にするとうまくいきました。
私の場合、モーダルは属性で正常に機能していましたが、jsから.modal( 'show')を呼び出すと、すぐに非表示になりました。 bootstrap.jsをフッターに入れることで問題は解決しましたが、すべてのcssおよびjquery宣言の後にヘッダーで動作しなかった理由がわかりません。
bootstrap.min.jsがこの問題を引き起こし、それを削除しても問題が解決します。
jQuery(document).on('click','#SendMail',function(){
jQuery("#fixerrormodal").modal('toggle');
});
これは助けになります
ここでの他の解決策は私を助けませんでした。 laravelにあるブレードフォーム内でモーダルを使用していたことがわかりました。これが、フォームアクションがループのリクエストを送信し、モデルが消える理由です。正常に動作します。
ボタンまたはアンカータグから_data-toggle="modal"
_および_data-target="#myModalID"
_属性を削除するだけです。これにより、モーダルが切り替わり、_bootstrap.min.
_ jsがインポートされました2回以上、切り替えます!
代わりに、ボタンのonClickイベントリスナーを記述し、手動でモーダルをトリガーします:$('#myModal').modal();
私は同じ問題を抱えていました、セッション変数に基づいてページをロードすると、モーダルを表示していましたが、$( '#myModal')。modal( 'show')を使用すると消えました、問題を使用して解決しましたjquery Triggerメソッド、使用したログインリンク
$(window).load(function(){ $('#loginlink').trigger('click'); });