ブートストラップ:モーダルで別のモーダルを開く


95

したがって、私はこのコードを使用して、現在開いているモーダルウィンドウで別のモーダルウィンドウを開きます。

<a onclick=\"$('#login').modal('hide');$('#lost').modal('show');\" href='#'>Click</a>

何が起こるかというと、500msほどスクロールバーが複製されるということです。現在のモーダルはまだフェードアウトしているためだと思います。ただし、非常に滑らかで途切れ途切れに見えます。

この問題を解決するための提案をいただければ幸いです。

また、onclickイベントでこれを構築する方法は専門外ですか?

ブートストラップバージョン3.0を使用しています。

編集:モーダルをフェードアウトする時間を短縮する必要があると思います。これはどのようにして可能ですか?


3
作業例はで見つけることができbootply.com/lvKQA2AM28
CrandellWS

回答:


86

data-dismiss 現在のモーダルウィンドウを強制的に閉じます

data-toggleその中のhrefコンテンツで新しいモーダルを開きます

<a data-dismiss="modal" data-toggle="modal" href="#lost">Click</a>

または

<a data-dismiss="modal" onclick="call the new div here">Click</a>

機能するかどうかをお知らせください。


おかげで、それは機能し、「onclick」の使用を避けます。しかし、アニメーションはスクロールバーを1秒間2倍にします。
AlexioVay 2013年

@ user2829128それは何をするかdata-dismissです。現在のウィンドウを閉じ、新しいウィンドウを開きます。bootplyまたはでコードを投稿できますかjsfiddle
jayeshkv 2013年

14
高さが長い場合、スクロールは2番目のモーダルでは機能しません。
Giraldi、

ブートストラップv4でも同じです。最初のmondalのボタンをクリックすると、別のモーダルが開き、2番目のモーダルが本体のスクロールとともに表示されます。問題は、クラス.modal-open for bodyにあります。クリックすると削除され、再度追加されません。
fdrv

7
.modal { overflow-y: auto }BS4スクロール問題を解決します。
Riki137

84

私のソリューションは下部のモーダルを閉じませんが、本当にその上に積み重ねます。スクロール動作を正しく保持します。Bootstrap 3でテスト済み。モーダルを期待どおりにスタックするには、Htmlマークアップでモーダルを最低から最高の順に並べる必要があります。

$(document).on('hidden.bs.modal', function (event) {
  if ($('.modal:visible').length) {
    $('body').addClass('modal-open');
  }
});

更新:モーダルを積み重ねると、すべての背景が最下部のモーダルの下に表示されます。次のCSSを追加することで修正できます。

.modal-backdrop {
    visibility: hidden !important;
}
.modal.in {
    background-color: rgba(0,0,0,0.5);
}

これにより、表示されている最上位のモーダルの下にモーダル背景が表示されます。こうすることで、下のモーダルがグレー表示されます。


2
ページマークアップの後半のアイテムは、当然のことながらz-indexが高く、マークアップの前半に出現したアイテムの上にスタックされます。明示的なz-indexを設定しない限り。
Hドッグ

1
@H Dog:まさに私が必要としたもの:)は完璧に動作します。ありがとう!
Tobias Koller

2
本当に伝説!! 誰かがこれだけのプラグインを使用することを提案したときはいつでも反転しました...単純な問題の単純な解決策が欲しかったので、それで...乾杯!
Fr0zenFyr 2017

2
あなたの助けに感謝します。2つのモーダルを同時に使用すると、あなたの解決策が私の問題を解決しました!!!!!
レボン

3
JavaScriptはBootstrap 4で機能しましたが、CSSは機能しませんでした。代わりに、背景を非表示にして、.modal:after {content: ""を追加しました。表示ブロック; 背景:rgba(0,0,0、.5); 位置:固定。上:0; 下:0; 幅:100%; z-index:-1; }
Jason G.


18

これを試して

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#test1">Open Modal 1 </button>



<div id="test1" class="modal fade" role="dialog" style="z-index: 1400;">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      
      <div class="modal-body">
      	<button type="button" class="btn btn-info btn-lg" data-toggle="modal"      data-target="#test2">Open Modal 2</button>
      	
      </div>      
    </div>
  </div>
</div>

<div id="test2" class="modal fade" role="dialog" style="z-index: 1600;">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      
      <div class="modal-body">
      	
        content
      	
      </div>      
    </div>
  </div>
</div>
  

</body>
</html>


1
私のために失敗... =(モーダル作品が、第一のモーダルが長い第一モーダル表示されますため、そのスクロールであれば、あなたは第二モーダルを開閉それが最初のモーダルスクロールが仕事に失敗したとき。
ヴィンセントDapiton

どうもありがとうございました:)
DanielMuñoz19年

17

hidden.bs.modalイベントを呼び出すことで、古いモーダルが閉じるタイミングを実際に検出できます。

    $('.yourButton').click(function(e){
        e.preventDefault();

        $('#yourFirstModal')
            .modal('hide')
            .on('hidden.bs.modal', function (e) {
                $('#yourSecondModal').modal('show');

                $(this).off('hidden.bs.modal'); // Remove the 'on' event binding
            });

    });

詳細:http : //getbootstrap.com/javascript/#modals-events


16

2018年の更新-Bootstrap 4の使用

ほとんどの回答に不要なjQueryがたくさんあるようです。別のモーダルからモーダルを開くには、Bootstrapが提供するイベントなどを使用するだけで実行できますshow.bs.modal。また、CSSで背景オーバーレイを処理することもできます。ここに別のシナリオからの3つのオープンモーダルがあります...

別のモーダルからモーダルを開く(最初のモーダルを開いたままにする)

<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">
              <h4 class="modal-title">Modal title</h4>    
              <button type="button" class="close" data-dismiss="modal">×</button>
            </div><div class="container"></div>
            <div class="modal-body">
              ...
              <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Open modal2</a>
            </div>
            <div class="modal-footer">
              <a href="#" data-dismiss="modal" class="btn">Close</a>
            </div>
          </div>
        </div>
</div>
<div class="modal" id="myModal2" data-backdrop="static">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">2nd Modal title</h4>
              <button type="button" class="close" data-dismiss="modal">×</button>
            </div><div class="container"></div>
            <div class="modal-body">
              ..
            </div>
            <div class="modal-footer">
              <a href="#" data-dismiss="modal" class="btn">Close</a>
              <a href="#" class="btn btn-primary">Save changes</a>
            </div>
          </div>
        </div>
</div>

この場合の潜在的な問題は、2番目のモーダルの背景が1番目のモーダルを隠すことです。これを防ぐには、2番目をモーダルにしdata-backdrop="static"、CSSを追加して背景のz-indexを修正します...

/* modal backdrop fix */
.modal:nth-of-type(even) {
    z-index: 1052 !important;
}
.modal-backdrop.show:nth-of-type(even) {
    z-index: 1051 !important;
}

https://www.codeply.com/go/NiFzSCukVl


別のモーダルからモーダルを開く(最初のモーダルを閉じる)

これは上記のシナリオに似ていますが、2番目が開かれたときに1番目のモーダルが閉じられるため、背景CSS修正の必要はありません。2番目のshow.bs.modalモーダルイベントを処理する単純な関数は、1番目のモーダルを閉じます。

$("#myModal2").on('show.bs.modal', function (e) {
    $("#myModal1").modal("hide");
});

https://www.codeply.com/go/ejaUJ4YANz


別のモーダル内でモーダル開く

最後の複数モーダルのシナリオでは、1番目のモーダル内で2番目のモーダルを開きます。この場合、2番目のマークアップは1番目の中に配置されます。追加のCSSやjQueryは必要ありません。

<div class="modal" id="myModal1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Modal title</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="container"></div>
            <div class="modal-body">
                ...
                <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal 2</a>
            </div>
            <div class="modal-footer">
                <a href="#" data-dismiss="modal" class="btn">Close</a>
            </div>
        </div>
    </div>

    <div class="modal" id="myModal2">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">2nd Modal title</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="container"></div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <a href="#" data-dismiss="modal" class="btn">Close</a>
                    <a href="#" class="btn btn-primary">Save changes</a>
                </div>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/iSbjqubiyn


ブートストラップ4では機能しません。2番目のモーダルを閉じると、1番目のモーダルはスクロールできなくなります。
ジャスティン

@ジャスティン-これを示す特定のシナリオは見当たりません。スクロールは元の質問の範囲外であるためです。スクロールの問題に固有の別の質問を探すか質問することをお勧めします。
ジム

nth-of-typeはクラスを参照しないため、私にはうまくいきませんでした。私はそれで動作しました: .modal-backdrop.show + .modal.show { z-index: 1052 !important; } .modal-backdrop.show + .modal.show + .modal-backdrop.show { z-index: 1051 !important; }
webhead

14

モーダルのモーダル:

$('.modal-child').on('show.bs.modal', function () {
    var modalParent = $(this).attr('data-modal-parent');
    $(modalParent).css('opacity', 0);
});
 
$('.modal-child').on('hidden.bs.modal', function () {
    var modalParent = $(this).attr('data-modal-parent');
    $(modalParent).css('opacity', 1);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<a href="#myModal" role="button" class="btn btn-primary" data-toggle="modal">Modals in Modal</a>


<div id="myModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
             
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <a href="#myModal1" role="button" class="btn btn-primary" data-toggle="modal">Launch other modal 1</a>
                <a href="#myModal2" role="button" class="btn btn-primary" data-toggle="modal">Launch other modal 2</a>
            </div>

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

<div id="myModal1" class="modal modal-child" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-modal-parent="#myModal">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header 1</h4>
            </div>
            <div class="modal-body">
                <p>Two modal body…1</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" data-dismiss="modal" aria-hidden="true">Cancel</button>
            </div>

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

<div id="myModal2" class="modal modal-child" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-modal-parent="#myModal">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header 2</h4>
            </div>
            <div class="modal-body">
                <p>Modal body…2</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" data-dismiss="modal" aria-hidden="true">Cancel</button>
            </div>

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


私のために失敗... =(モーダル作品が、第一のモーダルが長い第一モーダル表示されますため、そのスクロールであれば、あなたは第二モーダルを開閉それが最初のモーダルスクロールが仕事に失敗したとき。
ヴィンセントDapiton

上記の例では、最上位でも最上位でもない最初のモーダルの代わりにモーダルが生成されます(最初のモーダルは表示されなくなります)。
JackTheKnife

とてもいい効果。
ホルヘB.

セマンティックUIでソリューションをどのように使用できますか?
vahidsamimi

9

多くのモーダルが他のモーダルを呼び出すプロジェクトと、ボタンごとに毎回それを開始することを知らないかもしれない少数のHTML担当者がいるプロジェクトに取り組んでいます。最初に長い道のりを進んだ後、不本意ながら、@ gmaggioと同様の結論に達しました。

編集:JavaScript経由で呼び出されるモーダルをサポートするようになりました。

編集:別のモーダルからスクロールモーダルを開くことが機能するようになりました。

$(document).on('show.bs.modal', function (event) {
    if (!event.relatedTarget) {
        $('.modal').not(event.target).modal('hide');
    };
    if ($(event.relatedTarget).parents('.modal').length > 0) {
        $(event.relatedTarget).parents('.modal').modal('hide');
    };
});

$(document).on('shown.bs.modal', function (event) {
    if ($('body').hasClass('modal-open') == false) {
        $('body').addClass('modal-open');
    };
});

モーダル呼び出しボタンを通常どおりに配置するだけで、モーダル内にあることがピックアップされた場合、最初に現在のボタンを閉じてから、data-targetで指定されたボタンを開きます。relatedTargetBootstrapによって提供されることに注意してください。

フェージングを少しスムーズにするために、次の項目も追加しました。

.modal-backdrop.fade + .modal-backdrop.fade {
    transition: opacity 0.40s linear 0s;
}

100%あなたの問題ではありませんが、showned.bs.modalフックはちょっと便利です。body.modal-openクラスの管理はBS v.3.3.5でバグが多いようです。1つのモーダルを閉じて別のモーダルを開いた後、欠落しているため、(2番目の)モーダルではなく背景がスクロールしています。あなたのフックはその振る舞いを修正することができます。
Manuel Arwed Schmidt、2015

7

Twitterのドキュメントによると、カスタムコードが必要です...

これは追加のJavaScriptなしで機能しますが、カスタムCSSが強く推奨されます...

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalOneModal">
      Launch demo modal
    </button> 
            <!-- Modal -->
            <div class="modal fade bg-info" id="modalOneModal" tabindex="-1" role="dialog" aria-labelledby="modalOneLabel" aria-hidden="true">
    
              <div class="modal-dialog">
          
                <div class="modal-content  bg-info">
                  <div class="modal-header btn-info">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="modalOneLabel">modalOne</h4>
                  </div>
                  <div id="thismodalOne" class="modal-body bg-info">
                
                
              <!-- Button trigger modal -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#twoModalsExample">
      Launch demo modal
    </button>
             
                    <div class="modal fade bg-info" id="twoModalsExample" style="overflow:auto" tabindex="-1" role="dialog" aria-hidden="true">
                <h3>EXAMPLE</h3>
            </div>
                  </div>
                  <div class="modal-footer btn-info" id="woModalFoot">
                    <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
    <!-- End Form Modals -->


1
これは、2番目のモーダルが適切にフォーマットされた別の例ですbootply.com/qRsvPSrcO5
Zim

1
CSSで行ったようにZ-indexを@Skellyで変更することは良い考えです...z-index: 1080 !important;
CrandellWS

4
2番目のモーダルを開いて外側をクリックすると、バグが発生します。(Chrome、最新)
Martin Braun

多分私は間違っているが、ドキュメントはモーダルをモーダルに入れないように言っているので、それはちょっと意外ではない
CrandellWS

7

ブートストラップ4の場合、@ helloroyの回答を拡張するために、以下を使用しました。

var modal_lv = 0 ;
$('body').on('shown.bs.modal', function(e) {
    if ( modal_lv > 0 )
    {
        $('.modal-backdrop:last').css('zIndex',1050+modal_lv) ;
        $(e.target).css('zIndex',1051+modal_lv) ;
    }
    modal_lv++ ;
}).on('hidden.bs.modal', function() {
    if ( modal_lv > 0 )
        modal_lv-- ;
});

上記の利点は、モーダルが1つしかない場合は効果がなく、複数の場合のみ有効であることです。第2に、現在生成されていない将来のモーダルが確実に提供されるように、処理を本体に委任します。

更新

js / cssを組み合わせたソリューションに移行すると、外観が向上します-フェードアニメーションは引き続き背景で機能します;-

var modal_lv = 0 ;
$('body').on('show.bs.modal', function(e) {
    if ( modal_lv > 0 )
        $(e.target).css('zIndex',1051+modal_lv) ;
    modal_lv++ ;
}).on('hidden.bs.modal', function() {
    if ( modal_lv > 0 )
        modal_lv-- ;
});

次のCSSと組み合わせる;-

.modal-backdrop ~ .modal-backdrop
{
    z-index : 1051 ;
}
.modal-backdrop ~ .modal-backdrop ~ .modal-backdrop
{
    z-index : 1052 ;
}
.modal-backdrop ~ .modal-backdrop ~ .modal-backdrop ~ .modal-backdrop
{
    z-index : 1053 ;
}

これは、必要以上の深さまでネストされたモーダルを処理します。


ブートストラップ4では機能しません。2番目のモーダルを閉じると、1番目のモーダルはスクロールできなくなります。
ジャスティン

4

これを試して:

// Hide the login modal
$('#login').modal('hide');

// Show the next modal after the fade effect is finished
setTimeout(function(){ $('#lost').modal('show'); }, 500);

この単純なハックは私にとってはうまくいきます。


4

ブートストラップ4を使用するユーザー向け https://jsfiddle.net/helloroy/tmm9juoh/

var modal_lv = 0;
$('.modal').on('shown.bs.modal', function (e) {
    $('.modal-backdrop:last').css('zIndex',1051+modal_lv);
    $(e.currentTarget).css('zIndex',1052+modal_lv);
    modal_lv++
});

$('.modal').on('hidden.bs.modal', function (e) {
    modal_lv--
});
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-a">
  Launch demo modal a
</button>

<div class="modal fade" id="modal-a" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-b">
  Launch another demo modal b
</button>
<p class="my-3">
Not good for fade In.
</p>
<p class="my-3">
who help to improve?
</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-b" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-c">
  Launch another demo modal c
</button>
<p class="my-3">
But good enough for static modal
</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


<div class="modal" id="modal-c" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
<p class="my-3">That's all.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


これは素晴らしいことです。残っている唯一の問題は、最上部のモーダルが閉じているときにスクロールバーが再表示されないようにすることです
HyperActive

セマンティックUIでソリューションを使用するにはどうすればよいですか?
vahidsamimi

2

スクロール可能なモーダルでも問題が発生したため、次のようにしました。

  $('.modal').on('shown.bs.modal', function () {
    $('body').addClass('modal-open');
    // BS adds some padding-right to acomodate the scrollbar at right
    $('body').removeAttr('style');
  })

  $(".modal [data-toggle='modal']").click(function(){
    $(this).closest(".modal").modal('hide');
  });

表示されるようになるモーダルのモーダルに役立ちます。最初が閉じているので、2番目が表示されることに注意してください。ブートストラップ構造に変更はありません。


2

私は一緒に別のルートのようなものを行き、それらを「ネスト解除」することにしました。多分誰かがこの便利なものを見つけるでしょう...

var $m1 = $('#Modal1');
var $innermodal = $m1.find(".modal");     //get reference to nested modal
$m1.after($innermodal);                  // snatch it out of inner modal and put it after.

ありがとうございました

2

私のコードはdata-dismissを使用してうまく機能します。

<li class="step1">
    <a href="#" class="button-popup" data-dismiss="modal" data-toggle="modal" data-target="#lightbox1">
        <p class="text-label">Step 1</p>
        <p class="text-text">Plan your Regime</p>
    </a>

</li>
<li class="step2">
    <a href="#" class="button-popup" data-dismiss="modal" data-toggle="modal" data-target="#lightbox2">
        <p class="text-label">Step 2</p>
        <p class="text-text">Plan your menu</p>
    </a>
</li>
<li class="step3 active">
    <a href="#" class="button-popup" data-toggle="modal" data-dismiss="modal" data-target="#lightbox3">
        <p class="text-label">Step 3</p>
        <p class="text-text">This Step is Undone.</p>
    </a>
</li>

1

最初のブートストラップモーダルを閉じて、新しいモーダルを動的に開きます。

$('#Modal_One').modal('hide');
setTimeout(function () {
  $('#Modal_New').modal({
    backdrop: 'dynamic',
    keyboard: true
  });
}, 500);

1

モーダルボディのコンテンツを変更しないのはなぜですか?

    window.switchContent = function(myFile){
        $('.modal-body').load(myFile);
    };

モーダルにリンクまたはボタンを置くだけです

    <a href="Javascript: switchContent('myFile.html'); return false;">
     click here to load another file</a>

2つのモーダルを切り替えたいだけの場合:

    window.switchModal = function(){
        $('#myModal-1').modal('hide');
        setTimeout(function(){ $('#myModal-2').modal(); }, 500);
        // the setTimeout avoid all problems with scrollbars
    };

モーダルにリンクまたはボタンを置くだけです

    <a href="Javascript: switchModal(); return false;">
     click here to switch to the second modal</a>

これはUX関連の回答に似ています。モーダル#1に関するエラーメッセージを表示するためにこれが必要だったからです。したがって、モーダル#2にはエラーメッセージがありました。しかし、私がこの質問をしたのは今や長い年月であり、私は今、このようなことを別の方法で行っています。
AlexioVay

0

これを試して:

$('.modal').on('hidden.bs.modal', function () {
//If there are any visible
  if($(".modal:visible").length > 0) {
      //Slap the class on it (wait a moment for things to settle)
      setTimeout(function() {
          $('body').addClass('modal-open');
      },100)
  }
});

0

Hドッグの答えは素晴らしいですが、このアプローチは実際にInternet Explorer 11でモーダルフリッカーをいくつか与えていました。Bootstrapはまずモーダルを非表示にし、「modal-open」クラスを削除してから、(H Dogsソリューションを使用して)再び「モーダルオープン」クラス。これが何らかの理由で私が見ていたちらつきを引き起こしているのではないかと思います。HTML/ CSSのレンダリングが遅いためかもしれません。

別の解決策は、最初にbody要素から「modal-open」クラスを削除する際のブートストラップを防ぐことです。Bootstrap 3.3.7を使用すると、内部のhideModal関数のこのオーバーライドが完全に機能します。

$.fn.modal.Constructor.prototype.hideModal = function () {
    var that = this
    this.$element.hide()
    this.backdrop(function () {
        if ($(".modal:visible").length === 0) {
            that.$body.removeClass('modal-open')
        }
        that.resetAdjustments()
        that.resetScrollbar()
        that.$element.trigger('hidden.bs.modal')
    })
}

このオーバーライドでは、「モーダルオープン」クラスは、画面にモーダルが表示されていない場合にのみ削除されます。また、クラスをbody要素から削除および追加する1つのフレームを防ぎます。

ブートストラップがロードされた後にオーバーライドを含めるだけです。


-4

$(document).on('hidden.bs.modal', function (event) {
  if ($('.modal:visible').length) {
    $('body').addClass('modal-open');
  }
});

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.