113

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

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

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

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

また、これをonclick-eventで構築する方法は専門的ではありませんか?

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

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

4

23 に答える 23

100

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

data-togglehrefその中にコンテンツを含む新しいモーダルを開きます

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

また

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

動作するかどうかお知らせください。

于 2013-10-23T04:03:00.987 に答える
28

現在開いているモーダル ウィンドウで別のモーダル ウィンドウを開くには、bootstrap-modal
を使用できます。

ブートストラップモーダル DEMO

于 2014-03-18T04:12:48.993 に答える
20

これを試して

<!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>

于 2015-09-10T23:34:44.097 に答える
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 -->

于 2014-06-12T04:28:13.887 に答える
4

これを試して：

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

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

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

于 2015-10-20T12:10:33.500 に答える
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>
于 2014-05-26T10:02:23.010 に答える
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');
  });

表示されるモーダル内のモーダルに役立ちます。1 つ目は閉じているため、2 つ目が表示されることに注意してください。Bootstrap 構造に変更はありません。

于 2015-09-14T22:05:02.090 に答える
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.
于 2016-08-24T17:00:38.690 に答える
1

このスレッドは古いですが、Google から来た人には、ネットで見つけたすべての回答からハイブリッドなソリューションを提供します。

これにより、レベル クラスが追加されていることが確認されます。

$(document).on('show.bs.modal', '.modal', function (event) {
  $(this).addClass(`modal-level-${$('.modal:visible').length}`);
});

私の SCSS 内で、メインモーダルと 10 をサポートするルールを書きました (z-index: 1060ポップオーバーが発生するため 10)。必要に_variables.scss応じて、内部にレベル数を追加できます。

@for $level from 0 through 10 {
  .modal-level-#{$level} {
    z-index: $zindex-modal + $level;

    & + .modal-backdrop {
      z-index: $zindex-modal + $level - 1;
    }
  }
}

コントロールが台無しになるため、モーダル内にモーダルを含めることはできないことを忘れないでください。私の場合、すべてのモーダルは の最後にありbodyました。

modal-openそして最後に、以下のメンバーもこれについて言及しているように、1 つのモーダルを閉じた後、クラスをオンにしておく必要がありますbody。

$(document).on('hidden.bs.modal', function (e) {
  if ($('.modal:visible').length > 0) {
    $('body').addClass('modal-open');
  }
});
于 2020-11-26T08:10:04.983 に答える
0

最初のモーダルを適切に閉じないと、スクロールの不具合が発生します。Bootstrap 4 を使用した例を次に示します。

HTML:

<div class="modal fade" id="modal-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <button onclick="goToModal2">
        Go To Modal 2
      </button>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-2">
<div class="modal-dialog">
    <div class="modal-content">
      <button onclick="goToModal1">
        Go To Modal 1
      </button>
    </div>
  </div>
</div>

Javascript:

function goToModal2(){
  $("#modal-1").modal("hide");
  $("#modal-1").on("hidden.bs.modal", () => {
    $("#modal-2").modal("show");
    $("#modal-1").unbind("hidden.bs.modal");
  });
}

function goToModal1(){
  $("#modal-2").modal("hide");
  $("#modal-2").on("hidden.bs.modal", () => {
    $("#modal-1").modal("show");
    $("#modal-2").unbind("hidden.bs.modal");
  });
}

それは最善の方法ではありませんが。しかし、それは私にとって完璧に機能しました。

于 2021-03-31T14:51:15.230 に答える