問題タブ [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.

0 投票する
1 に答える
1458 参照

javascript - ember ビューでブートストラップのモーダル イベントにバインドするにはどうすればよいですか?

私は ember ビューを使用してモーダル イントロをアプリにレンダリングしていますが、現在は次のようになっています。

ビュー/modal.js

コントローラー/application.js

テンプレートはmodal.hbs定型的な html です。

関数をトリガーするとモーダルをうまくshowModal表示できますが、モーダルが閉じた後に DOM からビューを削除hiddenできませんでした。イベントにバインドしようとしていますが、方法がわかりません。誰かが私を正しい方向に向けますか?

0 投票する
1 に答える
530 参照

twitter-bootstrap - リモート パラメーターを使用した Bootstrap Modal が機能しない

モーダルポップアップを要求する次のコードがあります

私のリモートURLには次のコードがあります

これは、ブートストラップ ドキュメントのデフォルト コードです。しかし、リンクをクリックすると、ポップオーバーが機能しません。何か案は?

0 投票する
2 に答える
8554 参照

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 バージョンでは:

0 投票する
3 に答える
30333 参照

php - 編集ボタンをクリックしてブートストラップモーダルに特定の行データを表示する

私はプログラミングが初めてで、ブートストラップモーダルを実装してmysqlテーブルの行データをモーダルウィンドウに表示しようとしています。

リンクでstackoverflowの「mysqlテーブルからブートストラップモーダルに情報をプルする」にある解決策を試しました。しかし、$row['SFID'] で特定の行を表示できませんでした。

テーブル データを取得できますが、任意の行の前にある編集ボタンをクリックすると、常に最後の行 ID が表示されます

データを編集するモーダルの入力ボックスにデータを表示しません???.

私は今までここにいます、助けてください。



ご協力いただきありがとうございます。

0 投票する
1 に答える
295 参照

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 でモーダルをテストできること。サイトがサーバー上にあれば、もう問題はないはずです。

0 投票する
1 に答える
2641 参照

javascript - Twitter ブートストラップ モーダル URL 引数

たとえば、 http://www.example.org/modal.html?openmodal=trueに行くとモーダルが onLoad を開くようにする方法はありますが、 http://www.exampleに行くと.org/modal.htmlモーダルがオンロードで開かない?

0 投票する
1 に答える
1496 参照

jquery - ブートストラップ モーダル プラグインの読み込みが表示されない

私は何時間も頭を悩ませてきましたが、ブートストラップモーダルが ajax 機能を使用しているときに .on イベント内から読み込み画面を表示しない理由がわかりません。$('body').modalmanager('loading'); .on イベントの外に置くと機能するので、スクリプトが正しく機能していることがわかります。しかし、プラグインの例のように、on イベント内にある場合は何も得られません。助言がありますか?

以下のコードを使用してクリック イベントをバインドしています。

また、bootstrap.js に加えて、以下に示す最新の bootstrap-modal ファイルを含めています。

0 投票する
2 に答える
2985 参照

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 メソッドを使用したいと思います。