問題タブ [bootstrap-modal]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - ember ビューでブートストラップのモーダル イベントにバインドするにはどうすればよいですか?
私は ember ビューを使用してモーダル イントロをアプリにレンダリングしていますが、現在は次のようになっています。
ビュー/modal.js
コントローラー/application.js
テンプレートはmodal.hbs
定型的な html です。
関数をトリガーするとモーダルをうまくshowModal
表示できますが、モーダルが閉じた後に DOM からビューを削除hidden
できませんでした。イベントにバインドしようとしていますが、方法がわかりません。誰かが私を正しい方向に向けますか?
twitter-bootstrap - リモート パラメーターを使用した Bootstrap Modal が機能しない
モーダルポップアップを要求する次のコードがあります
私のリモートURLには次のコードがあります
これは、ブートストラップ ドキュメントのデフォルト コードです。しかし、リンクをクリックすると、ポップオーバーが機能しません。何か案は?
twitter-bootstrap - 選択したドロップダウン リストがモーダルで機能しない
jQuery Chosenの選択/ドロップダウンリストをBootboxモーダルで動作させようとしています。標準の HTML ページで動作するコードはほぼ同じなので、リストをモーダルにポップするのは簡単だと思いました。div を生成し、モーダルでオブジェクトを選択し、それが「表示」された後、Chosen を呼び出します。
この後、Chosen が壊れたようです。選択項目がグレー表示され、クリックできません。
myApp.init() 内で、選択項目を入力すると、機能します。
モーダルの舞台裏を見ると、Chosen コンテナーが初期化されているように見えますが、選択オプションが chzn-drop div に転送されていません。画像では、chzn-results UL にオプションを入力する必要があります。モーダルバージョンは次のとおりです。
HTML バージョンでは、次のようになります。
HTML バージョンでは、私のコードは body タグの一番下にあり (同様に、選択オプションは myApp.init() に取り込まれています)、問題なく動作しているようです。呼び出しの順序は同じようです...
これは単なる z-index の問題ではありません。モーダル内では、適切に初期化されているにもかかわらず、Chosen プラグインが何らかの形で混乱し、バインドまたは更新されていないようです。トラブルシューティングの方法がわからず、同じ問題を抱えている他の人を見つけることができません...これは、タイミングの問題である可能性があると思います(しかし、なぜHTMLで機能するのですか?)、または私は愚かなことをしています(非常におそらく)。どこを見るべきか、何が間違っているかについて誰か提案がありますか?
ありがとう!
============================
選択入力用の HTML の追加 (Christopher の質問による)
両方のバージョンで、select に次のコードを入力します (myApp.init() の内容を編集したバージョン)。
実際の要素自体は次のとおりです。動作しないモーダル バージョン:
そして、動作中の HTML バージョンでは:
php - 編集ボタンをクリックしてブートストラップモーダルに特定の行データを表示する
私はプログラミングが初めてで、ブートストラップモーダルを実装してmysqlテーブルの行データをモーダルウィンドウに表示しようとしています。
リンクでstackoverflowの「mysqlテーブルからブートストラップモーダルに情報をプルする」にある解決策を試しました。しかし、$row['SFID'] で特定の行を表示できませんでした。
テーブル データを取得できますが、任意の行の前にある編集ボタンをクリックすると、常に最後の行 ID が表示されます
データを編集するモーダルの入力ボックスにデータを表示しません???.
私は今までここにいます、助けてください。
ご協力いただきありがとうございます。
google-chrome - ブートストラップ モーダルは Chrome と Opera で動作しますが、html ページが読み込まれません
調べて検索しましたが、ブートストラップからモーダルにページをロードするための解決策が見つかりません。私が使用するコード (ブートストラップ ドキュメントから) は、FF、IE、および Safari のみで動作します。Chrome と Opera はロードしたくありません。モーダル ウィンドウは表示されますが、ページは表示されません。
Chrome コンソールを確認したところ、「オプション ファイル xxx.html Origin null は Access-Control-Allow-Origin では許可されておらず、XMLHttpRequest はファイル xxx.html Origin null を読み込めません。Access-Control-Allow-Origin では許可されていません。」これは Opera 12 でも同じ問題だと思います。
この Origin null は、Access-Control-Allow-Origin では許可されていません。Chrome と Opera でモーダルをテストできること。サイトがサーバー上にあれば、もう問題はないはずです。
javascript - Twitter ブートストラップ モーダル URL 引数
たとえば、 http://www.example.org/modal.html?openmodal=trueに行くとモーダルが onLoad を開くようにする方法はありますが、 http://www.exampleに行くと.org/modal.htmlモーダルがオンロードで開かない?
jquery - ブートストラップ モーダル プラグインの読み込みが表示されない
私は何時間も頭を悩ませてきましたが、ブートストラップモーダルが ajax 機能を使用しているときに .on イベント内から読み込み画面を表示しない理由がわかりません。$('body').modalmanager('loading'); .on イベントの外に置くと機能するので、スクリプトが正しく機能していることがわかります。しかし、プラグインの例のように、on イベント内にある場合は何も得られません。助言がありますか?
以下のコードを使用してクリック イベントをバインドしています。
また、bootstrap.js に加えて、以下に示す最新の bootstrap-modal ファイルを含めています。
twitter-bootstrap - bootstrap-modal プラグインを AngularUI Bootstrap と統合するにはどうすればよいですか
jQuery ベースの Web アプリケーションを AngularJS に移行中です。bootstrap-modal プラグインを AngularUI Bootstrap と統合するのに問題があります。ブートストラップ モーダル プラグインは、全幅モーダル、レスポンシブ デザイン、スタック可能なモーダルなど、私が必要とするいくつかの機能を提供します。
plunkerで 2 つを統合する基本的な試みを行いました。ウィンドウ幅が小さい場合、モーダルは全幅に見えることに注意してください。しかし、plunker のプレビュー ウィンドウをポップアウトして、ウィンドウの幅を 979 ピクセルを超えて大きくすると、モーダルがページの半分に落ちます。CSS がモーダルを "top: 50%" に設定することをブートストラップ モーダル ソース コードで確認できますが、JS はモーダルの高さに基づいて負の margin-top を設定することになっているため、モーダルは中央に垂直に配置されます。ページの。JS が適切に呼び出されていないため、モーダルがページの下部に偏っています。
以下のプランカーからのコードスニペット。
HTML:
JavaScript コントローラー:
代替アプローチは、AngularUI Bootstrap を使用せず、bootstrap の通常の方法を使用してモーダル HTML にコーディングするだけのようです。AngularJSを使用しながら、まさにそれを行うこのjsFiddleを見つけました。可能であれば、AngularUI メソッドを使用したいと思います。