複数のボタンに複数のブートストラップモーダルを表示する方法

シカンダルサハブ

同じページに複数のモーダルがあります。

例:ページに次のように2つのボタンが定義されています。

モーダル1のボタン:

<i class="fa fa-info-circle" data-toggle="modal" data-target="#firstModal"> First Modal </i>

モーダル2のボタン:

<i class="fa fa-info-circle" data-toggle="modal" data-target="#secondModal"> Second Modal  </i>

ページ下部の本文内のMODALS(フォームタグ内でも機能しません)

<!-- Modal defined first -->
<div class="modal fade" id="firstModal" tabindex="-1" role="dialog"
    aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <form>
            <div class="modal-content">
                <div class="modal-header modal-lg">Header</div>

                <div class="modal-body">

                    body

                    <div class="modal-footer">footer</div>

                </div>
            </div>
        </form>
    </div>
</div>

<!-- Modal defined second -->
<div class="modal fade" id="secondModal" tabindex="-1" role="dialog"
    aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <form>
            <div class="modal-content">
                <div class="modal-header modal-lg">Header</div>

                <div class="modal-body">

                    body

                    <div class="modal-footer">footer</div>

                </div>
            </div>
        </form>
</div>
</div>

問題文:コードだけで罰金作品の上に与えられた、しかしそれは私に最初に定義された唯一のモーダルを示しています。現在、#secondModalのみが機能するよりも#firstModalの上に#secondModalを定義すると、#firstModalのみが表示されます。

モーダルが2番目に定義された理由を説明してください。画面を暗くして、モーダルを表示しません。ありがとうございます

ビムレンドゥクマール
Just Create a function on click: ( in angular)
<button ng-click="openOne()"></button>
<button ng-click="openTwo()"></button>
$scope.openOne= funtion(){
    $("#yourModal1Name").modal('show');

}
$scope.openTwo= funtion(){
    $("#yourModal2Name").modal('show');
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

複数のモーダルボタンをブートストラップする

分類Dev

複数のASPリンクボタンからブートストラップモーダル複数データを送信する

分類Dev

ページ上の複数の画像にブートストラップモーダルを使用する方法

分類Dev

複数のブートストラップボタンを有効/無効にする最良の方法(Jquery)

分類Dev

データベースからのブートストラップ複数ドロップダウンに選択した値を表示する方法

分類Dev

右クリックでブートストラップモーダルを表示-複数のモーダル

分類Dev

同じページに複数のw3Schoolsライトボックス(モーダルボックス):最初のモーダルのコンテンツのみを表示するモーダルボックス

分類Dev

ブートストラップモーダルで複数のグーグルマップを動的にロードする方法

分類Dev

ブートストラップモーダルを介して複数のデータを渡す

分類Dev

複数のボタンによって送信された1つのモーダルブートストラップフォーム

分類Dev

複数のインラインラジオボタングループをラベルに垂直に揃えます(ブートストラップ3)

分類Dev

csvファイルのパンダのバープロットに複数のバーを表示する方法

分類Dev

アップデートコントローラーに複数のモデルをロードする方法

分類Dev

複数のボタングループを持つブートストラップ4入力グループ

分類Dev

cssでモーダルポップアップ用の複数のボタンを作成する方法

分類Dev

ブートストラップモーダルが非表示で破壊されないのはなぜですか?複数のリモートモーダルを機能させるにはどうすればよいですか?

分類Dev

複数のボタンでモーダルを確認するフラスコ

分類Dev

ブートストラップ:複数のモーダルダイアログを処理します

分類Dev

ブートストラップでモーダルを使用して複数ページのフォームを作成する方法

分類Dev

ノックアウトモデルデータを複数のテーブルにバインドする方法

分類Dev

パンダのグループ化、ピボット、またはスタック?1つの列のグループを複数の列に変換する

分類Dev

複数のタブを表示するブートストラップホバータブ

分類Dev

複数のマージブランチをGit-マスターブランチへのマージ中に複数のコミットを回避する方法

分類Dev

ブートストラップ4トグルのクリックで複数の効果を表示/非表示にする方法

分類Dev

複数のラジオボタングループのセットを処理する方法-reactjs

分類Dev

Chart.jsマルチバースタックチャートに複数のラベルを表示する方法

分類Dev

選択したすべての値をブートストラップから選択解除する方法-リセットボタン付きの複数選択?

分類Dev

ブートストラップモーダルカルーセルの次のボタンを非表示にする

分類Dev

再生/一時停止ボタンを備えた複数のブートストラップカルーセル

Related 関連記事

  1. 1

    複数のモーダルボタンをブートストラップする

  2. 2

    複数のASPリンクボタンからブートストラップモーダル複数データを送信する

  3. 3

    ページ上の複数の画像にブートストラップモーダルを使用する方法

  4. 4

    複数のブートストラップボタンを有効/無効にする最良の方法(Jquery)

  5. 5

    データベースからのブートストラップ複数ドロップダウンに選択した値を表示する方法

  6. 6

    右クリックでブートストラップモーダルを表示-複数のモーダル

  7. 7

    同じページに複数のw3Schoolsライトボックス(モーダルボックス):最初のモーダルのコンテンツのみを表示するモーダルボックス

  8. 8

    ブートストラップモーダルで複数のグーグルマップを動的にロードする方法

  9. 9

    ブートストラップモーダルを介して複数のデータを渡す

  10. 10

    複数のボタンによって送信された1つのモーダルブートストラップフォーム

  11. 11

    複数のインラインラジオボタングループをラベルに垂直に揃えます(ブートストラップ3)

  12. 12

    csvファイルのパンダのバープロットに複数のバーを表示する方法

  13. 13

    アップデートコントローラーに複数のモデルをロードする方法

  14. 14

    複数のボタングループを持つブートストラップ4入力グループ

  15. 15

    cssでモーダルポップアップ用の複数のボタンを作成する方法

  16. 16

    ブートストラップモーダルが非表示で破壊されないのはなぜですか?複数のリモートモーダルを機能させるにはどうすればよいですか?

  17. 17

    複数のボタンでモーダルを確認するフラスコ

  18. 18

    ブートストラップ:複数のモーダルダイアログを処理します

  19. 19

    ブートストラップでモーダルを使用して複数ページのフォームを作成する方法

  20. 20

    ノックアウトモデルデータを複数のテーブルにバインドする方法

  21. 21

    パンダのグループ化、ピボット、またはスタック?1つの列のグループを複数の列に変換する

  22. 22

    複数のタブを表示するブートストラップホバータブ

  23. 23

    複数のマージブランチをGit-マスターブランチへのマージ中に複数のコミットを回避する方法

  24. 24

    ブートストラップ4トグルのクリックで複数の効果を表示/非表示にする方法

  25. 25

    複数のラジオボタングループのセットを処理する方法-reactjs

  26. 26

    Chart.jsマルチバースタックチャートに複数のラベルを表示する方法

  27. 27

    選択したすべての値をブートストラップから選択解除する方法-リセットボタン付きの複数選択?

  28. 28

    ブートストラップモーダルカルーセルの次のボタンを非表示にする

  29. 29

    再生/一時停止ボタンを備えた複数のブートストラップカルーセル

ホットタグ

アーカイブ