タグ付けされた質問 「modal-dialog」

ユーザーに重要な情報を表示するために使用されるグラフィカルダイアログを指します。これらのダイアログは他のすべてのコンテンツの上に表示され、ユーザー入力が受信されるまでアプリケーションフローをブロックします。

30
背景の下に表示されるブートストラップモーダル
私はブートストラップの例から直接モーダルのコードを使用し、bootstrap.jsのみを含めました（bootstrap-modal.jsは含めません）。ただし、私のモーダルは灰色のフェード（背景）の下に表示され、編集できません。 これは次のようになります。 この問題を再現する1つの方法については、このフィドルを参照してください。そのコードの基本的な構造は次のとおりです。 <body> <p>Lorem ipsum dolor sit amet.</p> <div class="my-module"> This container contains the modal code. <div class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body">Modal</div> </div> </div> </div> </div> </body> body { padding-top: 50px; } .my-module { position: fixed; top: 0; left: 0; } これがなぜであるか、またはこれを修正するために私が何ができるかという考えはありますか？
18
Twitter Bootstrapモーダルウィンドウが閉じないようにする
Twitterブートストラップを使用してモーダルウィンドウを作成しています。デフォルトの動作では、モーダル領域の外側をクリックすると、モーダルは自動的に閉じます。これを無効にしたいのですが、モーダルの外側をクリックしたときにモーダルウィンドウを閉じないでください。 これを行うために誰かがjQueryコードを共有できますか？
11
関数をTwitter Bootstrap Modalにバインドする
私は新しいプロジェクトでTwitter Bootstrap libを使用していて、ページの一部で最新のjsonデータをモーダルクローズで更新して取得したいと考えています。ドキュメンテーションのどこにもこれが見当たらないので、誰かが私に指摘したり、解決策を提案したりできます。 文書化された方法の使用に関する2つの問題 $('#my-modal').bind('hide', function () { // do something ... }); モーダルに「非表示」クラスをすでにアタッチしているため、ページのロード時に表示されず、2回ロードされます。 非表示クラスを削除して要素IDをに設定し、上記の関数にdisplay:none追加console.log("THE MODAL CLOSED");しても、閉じると何も起こりません。
18
ブートストラップモーダル領域の外側のクリックを無効にして、モーダルを閉じます
ブートストラップ「モーダル」をいくつか使用して、ブートストラップのウェブサイトを作成しています。一部のデフォルト機能をカスタマイズしようとしています。 問題はこれです。背景をクリックしてモーダルを閉じることができます。この機能を無効にする方法はありますか？特定のモーダルのみ？ ブートストラップモーダルページ
25
ブートストラップモーダルを閉じる
ブートストラップモーダルダイアログボックスを最初に表示したいのですが、ユーザーがページをクリックすると表示されなくなります。私は以下を持っています： $(function () { $('#modal').modal(toggle) }); <div class="modal" id='modal'> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Error:</h3> </div> <div class="modal-body"> <p>Please correct the following errors:</p> </div> </div> </div> モーダルは最初に表示されますが、モーダルの外側をクリックしても閉じません。また、コンテンツ領域は灰色表示されません。モーダルを最初に表示し、ユーザーが領域の外側をクリックした後に閉じるにはどうすればよいですか？そして、デモのように背景をグレーアウトするにはどうすればよいですか？
24
JavaScriptでBootstrapモーダルを隠す方法は？
私はここの投稿、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アクションでは、作成してContactに渡すコードがありますcreate.js.erb。ではcreate.js.erb、いくつかのエラー処理コード（rubyとjavascriptの混合）があります。すべてがうまくいけば、モーダルを閉じたい。 ここで問題が発生します。すべてがうまくいくと、モーダルを却下できないようです。 私が試しましたが$('#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 …
30
ブートストラップ3モーダル垂直位置センター
これは2つの部分からなる質問です。 モーダルの正確な高さがわからないときに、モーダルを垂直に中央に配置するにはどうすればよいですか？ モーダルを中央に配置し、モーダル本体にoverflow：autoを含めることは可能ですか？ただし、モーダルが画面の高さを超えている場合のみですか？ 私はこれを使ってみました： .modal-dialog { height: 80% !important; padding-top:10%; } .modal-content { height: 100% !important; overflow:visible; } .modal-body { height: 80%; overflow: auto; } これにより、コンテンツが垂直画面サイズよりもはるかに大きい場合に必要な結果が得られますが、小さなモーダルコンテンツの場合は、ほとんど使用できません。
22
Twitterブートストラップリモートモーダルで毎回同じコンテンツが表示される
Twitterブートストラップを使用していますが、モーダルを指定しています <div class="modal hide" id="modal-item"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">x</button> <h3>Update Item</h3> </div> <form action="http://www.website.com/update" method="POST" class="form-horizontal"> <div class="modal-body"> Loading content... </div> <div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal">Close</a> <button class="btn btn-primary" type="submit">Update Item</button> </div> </form> </div> そしてリンク <a href="http://www.website.com/item/1" data-target="#modal-item" data-toggle="modal">Edit 1</a> <a href="http://www.website.com/item/2" data-target="#modal-item" data-toggle="modal">Edit 2</a> <a href="http://www.website.com/item/3" …
30
Twitterブートストラップモーダル背景が消えない
Twitterブートストラップモーダルダイアログを使用しています。ブートストラップモーダルダイアログの送信ボタンをクリックすると、AJAXリクエストが送信されます。私の問題は、モーダル背景が消えないことです。モーダルダイアログは正しく消えますが、代わりに画面に不透明度を作成する「モーダル背景」が残ります。 私に何ができる？
5
非同期アクションを実行するReduxでモーダルダイアログを表示するにはどうすればよいですか？
状況によっては確認ダイアログを表示する必要があるアプリを作成しています。 何かを削除したいとしdeleteSomething(id)、いくつかのレデューサーがそのイベントをキャッチし、それを表示するためにダイアログレデューサーを埋めるように、アクションをディスパッチします。 このダイアログが送信されたときに私の疑問が生じます。 このコンポーネントは、ディスパッチされた最初のアクションに従って適切なアクションをどのようにディスパッチできますか？ アクション作成者はこのロジックを処理する必要がありますか？ レデューサー内にアクションを追加できますか？ 編集： より明確にするために： deleteThingA(id) => show dialog with Questions => deleteThingARemotely(id) createThingB(id) => Show dialog with Questions => createThingBRemotely(id) だから私はダイアログコンポーネントを再利用しようとしています。ダイアログの表示/非表示は、レデューサーで簡単に実行できるため問題ではありません。私が指定しようとしているのは、左側からフローを開始するアクションに従って、右側からアクションをディスパッチする方法です。
27
ブートストラップモーダルはすぐに消えます
ブートストラップを使用してウェブサイトで作業しています。 基本的に、私はヒーローユニットのボタンで呼び出されるホームページでモーダルを使用したいと思いました。 ボタンコード： <button type="button" class="btn btn-warning btn-large" data-toggle="modal" data-target="#myModal">Open Modal</button> モーダルコード： <div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">In Costruzione</h3> </div> <div class="modal-body"> <p>Test Modal: Bootstrap</p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Chiudi</button> <button class="btn btn-warning">Salva</button> </div> </div> 問題は、ボタンをクリックするとすぐにモーダルがフェードインし、すぐに消えてしまうことです。 …
4
Twitter Bootstrapでモーダル終了イベントを処理する方法は？
Twitterブートストラップで、モーダルのドキュメントを確認します。モーダルのcloseイベントをリッスンして関数を実行する方法があるかどうか、わかりませんでした。 たとえば、このモーダルを例に取ってみましょう： <div class="modal-header"> <button type="button" class="close close_link" data-dismiss="modal" aria-hidden="true">×</button> <h3>Modal header</h3> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <a href="#" class="btn close_link" data-dismiss="modal">Close</a> </div> 上にあるXボタンと下にある閉じるボタンの両方で、モーダルを非表示/閉じることができますdata-dismiss="modal"。それで、どういうわけかそれを聞くことができたのでしょうか？ あるいは、私はこのように手動でそれを行うことができたと思います... $("#salesitems_modal").load(url, data, function() { $(this).modal('show'); $(this).find(".close_link").click(modal_closing); }); どう思いますか？
10
jquery-ui-dialog-ダイアログを閉じるイベントにフックする方法
jquery-ui-dialogプラグインを使用しています ダイアログが閉じている状況でページを更新する方法を探しています。 ダイアログからcloseイベントをキャプチャする方法はありますか？ 閉じるボタンがクリックされたときにコードを実行できることはわかっていますが、ユーザーがエスケープで閉じることや右上隅のxをカバーしていません。
28
複数のモーダルオーバーレイ
オーバーレイが背面ではなく、最初のモーダルの上に表示される必要があります。 コードスニペットを表示 $('#openBtn').click(function(){ $('#myModal').modal({show:true}) }); <a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal title</h4> </div><div class="container"></div> <div class="modal-body"> Content for the dialog / modal goes here. <br> <br> <br> <br> <br> <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch …
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.