ブートストラップモーダル：現在を閉じ、新しく開く

84

私はしばらく探しましたが、これに対する解決策を見つけることができません。私は以下が欲しい：

  • Bootstrapモーダル内のURLを開きます。私はこれをコース外で行っています。したがって、コンテンツは動的にロードされます。
  • ユーザーがこのモーダル内のボタンを押すと、現在のモーダルを非表示にし、その直後に、ユーザーがクリックした新しいURLで新しいモーダルを開きます。2番目のモーダルのこのコンテンツも動的にロードされます。
  • その後、ユーザーがその2番目のモーダルを閉じると、最初のモーダルが再び戻る必要があります。

私はこれを何日も見つめています、誰かが私を助けてくれることを願っています。

前もって感謝します。

javascript  jquery  twitter-bootstrap 
— Eelco Luurtsema
ソース
ブートストラップ2または3？あなたが持っているもののJSフィドルを設定できますか？
— ティムワッソン2013
ブートストラップ2.3.1。動的なコンテンツのため、JSフィドルをセットアップできないと思います
— Eelco Luurtsema 2013

回答:

59

特定のコードを見ずに、正確な答えを出すことは困難です。ただし、Bootstrapのドキュメントから、次のようにモーダルを非表示にできます。

$('#myModal').modal('hide')

次に、非表示になったら別のモーダルを表示します。

$('#myModal').on('hidden.bs.modal', function () {
  // Load up a new modal...
  $('#myModalNew').modal('show')
})

URLを新しいモーダルウィンドウにプッシュする方法を見つける必要がありますが、それは簡単なことだと思います。コードを見ずに、その例を示すのは難しいです。

— ティム・ワッソン
ソース
不思議なことに、Bootstrap3で動作するようになりました。コードがBootstrapTooltipsと競合していたと思いますが、バージョン3で変更されています。ありがとう
— Eelco Luurtsema 2013
8
ブートストラップv3イベントは「hidden.bs.modal」です
— coure2011 2014
3
data-dismissを使用したソリューションは、はるかに洗練されており（少なくとも、2015年）、ブートストラップ以外のjavascriptを必要としません。
— Manuel Arwed Schmidt 2015
ありがとう@ coure2011
— capcom
4
data-toggle = "modal" data-target = "＃targetmodal" data-dismiss = "modal"これは問題なく機能します。
— スーシャン2018年
79

これは遅い答えだと思いますが、役に立つかもしれません。@karimaが前述したように、これを行うための適切でクリーンな方法は次のとおりです。実際には、2つの関数を同時に起動できます。triggerそしてdismissモーダル。

HTMLマークアップ;

<!-- Button trigger modal -->
<ANY data-toggle="modal" data-target="TARGET">...</ANY>

<div class="modal fade" id="SELECTOR" tabindex="-1">
  <div class="modal-dialog">
   <div class="modal-content">
    <div class="modal-body"> ... </div>
     <div class="modal-footer">           <!-- ↓ -->  <!--      ↓      -->
      <ANY data-toggle="modal" data-target="TARGET-2" data-dismiss="modal">...</ANY>
     </div>
   </div>
  </div>
</div>

デモ

— マフムード
ソース
25
最初のモーダルを開いた後、ページのスクロールは正しく機能することに気付くので、ブエノはありませんが、既存のモーダルから別のモーダルを起動すると、スクロールが背景に移動します。スクロールする必要のあるモーダルがある場合（たとえば、モバイルデバイスで表示している場合）、これは大きな問題です。
— グラヴィティグレイブ2015年
私は非常によく似た問題を抱えていますが、角度があります。ここで行ったのと同じことを角度コントローラーで行い、templateUrlandwindowClassプロパティを使用する方法を知っていますか？
— ジョンR
1
ありがとう-私のために働きます。私にとっての主な問題はdata-dismiss="modal"、ボタンを見逃したことでした
— FDisk 2016年
@ Mahmoud、2番目のモーダルを1つからロードしているときに、振動するような効果を回避する方法はありますか？余分なスクロールを回避する方法は？
— アルンザビエル
これはブラウザの問題です。GoogleChromeでは、モーダルを変更したり、閉じたり、開いたりすると「揺れ」ます。試す-webkit-backface-visibility: hidden;HTML、身体のCSSに
— マキシマAlekz
36

これは正確には応答ではありませんが、現在のモーダルを閉じて新しいモーダルを開きたい場合に役立ちます。

同じボタンのhtmlで、data-dismissを使用して現在のモーダルを閉じ、data-targetを使用して新しいモーダルを直接開くように要求できます。

<button class="btn btn-success" 
data-toggle="modal" 
data-target="#modalRegistration" 
data-dismiss="modal">Register</button>
— カリマ・ラフス
ソース
4
このアイデアをありがとう
— Jitendra Vyas 2015
2
問題data-dismiss="modal"は、2番目のモーダルを閉じると、コンテンツが左にシフトすることです。
— クルディープダンギ2016年
1
うーん。この方法は私にはうまくいきません。1つ目は消えますが、2つ目は表示されません
— KevinDeus 2016年
ケビン、あなたがどのような問題を抱えていたかは
— わかり
私のために美しく働いた！そして非常に簡単な解決策。ありがとう！
— guero64 2016年
10

の問題 data-dismiss="modal"は、コンテンツが左にシフトすることです

私は私のために働いたものを共有しています、問題の声明はpop1から開いていましたpop2

JSコード

var showPopup2 = false;
$('#popup1').on('hidden.bs.modal', function () {
    if (showPopup2) {
        $('#popup2').modal('show');
        showPopup2 = false;
    }
});

$("#popup2").click(function() {
    $('#popup1').modal('hide');
    showPopup2 = true;
});
— クルディープダンギ
ソース
2
そのような単純な解決策：）
— Geoff
9

私はこの方法を使用します：

$(function() {
  return $(".modal").on("show.bs.modal", function() {
    var curModal;
    curModal = this;
    $(".modal").each(function() {
      if (this !== curModal) {
        $(this).modal("hide");
      }
    });
  });
});
— ジョシュディーン
ソース
4

次のコードを使用すると、最初のモーダルを非表示にしてすぐに2番目のモーダルを開くことができます。同じ戦略を使用すると、2番目のモーダルを非表示にして最初のモーダルを表示できます。 

$("#buttonId").on("click", function(){
    $("#currentModalId").modal("hide");
    $("#currentModalId").on("hidden.bs.modal",function(){
    $("#newModalId").modal("show");
    });
});
— Husnain Shabbir
ソース
スクロールの問題も修正
— RichardHousham19年
4

この機能を追加するリンクまたはボタンに次の属性を追加する必要があります。 

 data-dismiss="modal" data-toggle="modal" id="forgotPassword" data-target="#ModalForgotPassword"

詳細なブログ：http：//sforsuresh.in/bootstrap-modal-window-close-current-open-new-modal/

— Suresh Kamrushi
ソース
ブートストラップ4と完璧に動作します
— Heather92065
4 
data-dismiss="modal"

これは、既存の開いているモデルを閉じるために使用されます。新しいモデルに設定できます

— M.ラック
ソース
これがすべてのバージョンのブートストラップで機能するかどうかはわかりません。私の場合、モーダルを閉じると、モーダルが閉じて新しいモーダルが開きますが、ボディからモーダルクラスが削除されたため、モーダルを下にスクロールできません。
— ボドフ
4

上記のように、同じボタンのhtmlで、data-dismissを使用して現在のモーダルを閉じ、data-targetを使用して新しいモーダルを直接開くように要求できます。

<button class="btn btn-success" data-toggle="modal" data-target="#modalRegistration" data-dismiss="modal">Register</button>

ただし、これによりスクロールバーが消え、2番目のモーダルが最初のモーダルよりも長かったことに気付くでしょう。

したがって、解決策は、モーダルインラインスタイルに次のスタイルを追加することです。

Style = "overflow-y : scroll ; "

— anouar es-sayid
ソース
1
私のためのその仕事：D
— グロリアマヘナ
2

BootStrap 3を使用すると、これを試すことができます：-

var visible_modal = jQuery('.modal.in').attr('id'); // modalID or undefined
if (visible_modal) { // modal is active
    jQuery('#' + visible_modal).modal('hide'); // close modal
}

http://getbootstrap.com/javascript/#modalsで動作することがテストされています（最初に「LaunchDemoModal」をクリックしてください）。

— アルビンK。
ソース
3
.attr少しは必要ないと思いますよね？これも同様に機能しませんか？var visible_modal = jQuery('.modal.in'); if (visible_modal) { visible_modal.modal('hide'); }。
— Paul D. Waite 2014
2

私はまったく同じ問題を抱えています、そして私の解決策はモーダルダイアログが[role = "dialog"]属性を持っている場合のみです：

/*
* Find and Close current "display:block" dialog,
* if another data-toggle=modal is clicked
*/
jQuery(document).on('click','[data-toggle*=modal]',function(){
  jQuery('[role*=dialog]').each(function(){
    switch(jQuery(this).css('display')){
      case('block'):{jQuery('#'+jQuery(this).attr('id')).modal('hide'); break;}
    }
  });
});
— ジョニー
ソース
1
jsfiddle.net/e6x4hq9h/7 これを試しましたが、最初にモーダルを開いたときに機能しますが、それ以降は機能しません。
— Joshua Dickerson 2016年
2

@Gravity Graveと同じ問題があり、使用するとスクロールが機能しません。

data-toggle="modal" data-target="TARGET-2"

と組み合わせて 

data-dismiss="modal"

スクロールが正しく機能せず、モーダルではなくページのスクロールに戻ります。これは、データがモーダルオープンクラスをタグから削除したためです。

最終的な私の解決策は、モーダルに内部コンポーネントのhtmlを設定し、cssを使用してテキストをフェードイン/フェードアウトすることでした。

— ジャマダン
ソース
1

クリック機能の使用：

$('.btn-editUser').on('click', function(){
    $('#viewUser').modal('hide'); // hides modal with id viewUser 
    $('#editUser').modal('show'); // display modal with id editUser
});

注意喚起：

表示したいものが独立したモーダルであることを確認してください。

— クラウディオ
ソース
1

最初のモーダル：

フッターのモーダル却下リンクを下の閉じるリンクに置き換えます。

<div class="modal-footer">
      <a href="#"  data-dismiss="modal" class="btn btn-primary" data-toggle="modal" data-target="#second_model_id">Close</a>
</div>

2番目のモーダル：

次に、2番目のモーダルでtopdivをbelowdivタグに置き換えます。

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="add text for disabled people here" aria-hidden="true" id="second_model_id">
— Taimoor Changaiz
ソース
1

同じ問題がありました。将来誰かがこれに遭遇し、スクロールが必要な複数のモーダルに問題がある場合に備えて、ここにこれを書きますします（私はBootstrap 3.3.7を使用しています）

私がしたことは、私の最初のモーダル内に次のようなボタンがあることです。

<div id="FirstId" data-dismiss="modal" data-toggle="modal" data-target="#YourModalId_2">Open modal</div>

最初のボタンを非表示にしてから2番目のモーダルを表示し、2番目のモーダルでは次のような閉じるボタンがあります。

<div id="SecondId" data-dismiss="modal" data-toggle="modal" data-target="#YourModalId_1">Close</div>

したがって、これにより2番目のモーダルが閉じて最初のモーダルが開き、スクロールを機能させるために、.cssファイルに次の行を追加しました。

.modal {
overflow: auto !important;
}

PS：ちなみに、これらのモーダルは個別に用意する必要があります。最初のモーダルを非表示にするため、マイナーモーダルを最初のモーダルにネストすることはできません。

したがって、ブートストラップモーダルの例に基づく完全な例を次に示します。

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal 1 -->
<div class="modal fade" id="exampleModal" 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">
        Add lorem ipsum here
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#exampleModal2">
          Open second modal
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Modal 2 -->
<div class="modal fade" id="exampleModal2" 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">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal"  data-toggle="modal" data-target="#exampleModal">Close</button>
      </div>
    </div>
  </div>
</div>
— レンネット
ソース
1

これを試して

    $('#model1').modal('hide');
setTimeout(function(){
    $('#modal2').modal('show');
},400);
— ケロレスモンセフ
ソース
1
リスナーがクローズモーダルイベントに永久にバインドされることはないため、これは実際には受け入れられているソリューションよりも優れています。
— ルイス・エンリケ
0 
$("#buttonid").click(function(){
    $('#modal_id_you_want_to_hid').modal('hide')
});

// same as above button id
$("#buttonid").click(function(){
$('#Modal_id_You_Want_to_Show').modal({backdrop: 'static', keyboard: false})});
— アジェイ・カバリヤ
ソース
$（ "＃buttonid"）。click（function（）{$（ '＃modal_id_you_want_to_hid'）。modal（ 'hide'）}）; //上記と同じボタンID $（ "＃buttonid"）。click（function（）{$（ '＃Modal_id_You_Want_to_Show'）。modal（{backdrop： 'static'、keyboard：false}）}）
— Ajay Kabariya
0

私は別の方法を使用します：

$('#showModal').on('hidden.bs.modal', function() {
        $('#easyModal').on('shown.bs.modal', function() {
            $('body').addClass('modal-open');
        });
    });
— АлексейМорозов
ソース
0

新しいモーダルを開いているときに以前に開いたモーダルを閉じたい場合は、最初に現在開いているモーダルを閉じてから、400ミリ秒のタイムアウトを与えて閉じてから、次のコードのように新しいモーダルを開くことによって、javascript / jqueryから行う必要があります： 

$('#currentModal').modal('hide');

setTimeout(function() {
       //your code to be executed after 200 msecond 
       $('#newModal').modal({
           backdrop: 'static'//to disable click close
   })
}, 400);//delay in miliseconds##1000=1second

それを使ってやろうとすると、data-dismiss="modal"@ gravityと@kuldeepがコメントで述べているようにスクロールの問題が発生します。

— shivgre
ソース
0

質問で述べたのとまったく同じことを達成したかったので、どの答えも役に立ちませんでした。

この目的のためにjQueryプラグインを作成しました。

/*
 * Raj: This file is responsible to display the modals in a stacked fashion. Example:
 * 1. User displays modal A
 * 2. User now wants to display modal B -> This will not work by default if a modal is already displayed
 * 3. User dismisses modal B
 * 4. Modal A should now be displayed automatically -> This does not happen all by itself 
 * 
 * Trying to solve problem for: http://stackoverflow.com/questions/18253972/bootstrap-modal-close-current-open-new
 * 
 */

var StackedModalNamespace = StackedModalNamespace || (function() {
    var _modalObjectsStack = [];
    return {
        modalStack: function() {
            return _modalObjectsStack;
        },
        currentTop: function() {
            var topModal = null;
            if (StackedModalNamespace.modalStack().length) {
                topModal = StackedModalNamespace.modalStack()[StackedModalNamespace.modalStack().length-1];
            }
            return topModal;
        }
    };
}());

// http://stackoverflow.com/a/13992290/260665 difference between $.fn.extend and $.extend
jQuery.fn.extend({
    // https://api.jquery.com/jquery.fn.extend/
    showStackedModal: function() {
        var topModal = StackedModalNamespace.currentTop();
        StackedModalNamespace.modalStack().push(this);
        this.off('hidden.bs.modal').on('hidden.bs.modal', function(){   // Subscription to the hide event
            var currentTop = StackedModalNamespace.currentTop();
            if ($(this).is(currentTop)) {
                // 4. Unwinding - If user has dismissed the top most modal we need to remove it form the stack and display the now new top modal (which happens in point 3 below)
                StackedModalNamespace.modalStack().pop();
            }
            var newTop = StackedModalNamespace.currentTop();
            if (newTop) {
                // 3. Display the new top modal (since the existing modal would have been hidden by point 2 now)
                newTop.modal('show');
            }
        });
        if (topModal) {
            // 2. If some modal is displayed, lets hide it
            topModal.modal('hide');
        } else {
            // 1. If no modal is displayed, just display the modal
            this.modal('show');
        }
    },
});

参考のために働くフィドル、JSFiddle：https：//jsfiddle.net/gumdal/67hzgp5c/

「showStackedModal()」だけでなく、新しいAPI「」を使用して呼び出す必要がありますmodal('show')。非表示部分は以前と同じにすることができ、モーダルを表示および非表示にするスタックアプローチが自動的に処理されます。

— ラージパワンガムダル
ソース
0

BootStrap3.xのシンプルでエレガントなソリューション。同じモーダルをこの方法で再利用できます。

$("#myModal").modal("hide");
$('#myModal').on('hidden.bs.modal', function (e) {
   $("#myModal").html(data);
   $("#myModal").modal();
   // do something more...
});
— Avnish alok
ソース
0

mdbを使用する場合は、このコードを使用してください 

    var visible_modal = $('.modal.show').attr('id'); // modalID or undefined
    if (visible_modal) { // modal is active
        $('#' + visible_modal).modal('hide'); // close modal
    }
— モエイーンマソウディ
ソース
0 
<div class="container">
  <h1>Bootstrap modal: close current, open new</h1>
  <p class="text-muted">
  A proper and clean way to get this done without addtional Javascript/jQuery. The main purpose of this demo is was to answer this 
  <a href="http://stackoverflow.com/questions/18253972/bootstrap-modal-close-current-open-new">question on stackoverflow</a>
  </p>
  <hr />

  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-1">Launch Modal #1</button>
  <button type="button" class="btn btn-info"    data-toggle="modal" data-target="#demo-2">Launch Modal #2</button>
  <button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3">Launch Modal #3</button>

  <!-- [ Modal #1 ] -->
  <div class="modal fade" id="demo-1" tabindex="-1">
    <div class="modal-dialog">
     <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title caps"><strong>Demo Modal #1</strong></h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Input Placeholder..." />
            <span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
          </div>
        </div>
      </div>
       <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">&times;</button>
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#demo-2" data-dismiss="modal">Close current, Launch Modal #2</button>
            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3" data-dismiss="modal">Close current, Launch Modal #3</button>
        </div>
     </div>
    </div>
  </div>

  <!-- [ Modal #2 ] -->
  <div class="modal fade" id="demo-2" tabindex="-1">
    <div class="modal-dialog">
     <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title caps"><strong>Demo Modal #2</strong></h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Input Placeholder..." />
            <span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
          </div>
        </div>
      </div>
       <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">&times;</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-1" data-dismiss="modal">Close current, Launch Modal #1</button>
            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3" data-dismiss="modal">Close current, Launch Modal #3</button>
        </div>
     </div>
    </div>
  </div>

  <!-- [ Modal #3 ] -->
  <div class="modal fade" id="demo-3" tabindex="-1">
    <div class="modal-dialog">
     <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title caps"><strong>Demo Modal #3</strong></h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Input Placeholder..." />
            <span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
          </div>
        </div>
      </div>
       <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">&times;</button>
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#demo-1" data-dismiss="modal">Close current, Launch Modal #1</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-2" data-dismiss="modal">Close current, Launch Modal #2</button>
        </div>
     </div>
    </div>
  </div>

  <hr />
  <h3 class="caps">Usage:</h3>
<pre class="prettyprint">&lt;!-- Button trigger modal --&gt;
&lt;ANY data-toggle="modal" data-target="TARGET"&gt;...&lt;/ANY&gt;

&lt;div class="modal fade" id="SELECTOR" tabindex="-1"&gt;
  &lt;div class="modal-dialog"&gt;
   &lt;div class="modal-content"&gt;
    &lt;div class="modal-body"&gt; ... &lt;/div&gt;
     &lt;div class="modal-footer"&gt;           &lt;!-- ↓ --&gt;  &lt;!--      ↓      --&gt;
      &lt;ANY data-toggle="modal" data-target="TARGET-2" data-dismiss="modal"&gt;...&lt;/ANY&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
</div> <!-- end .container -->

<hr />
<footer class="text-center"><a href="https://twitter.com/_elmahdim">@_elmahdim</a></footer>
<br />
<br />
— ジュナイド・マスード
ソース
0

私はこれに少し遅れるかもしれませんが、私は実用的な解決策を見つけたと思います。

必須-

jQuery

次のように設定された属性を持つ終了/却下ボタンを持つすべてのモーダル-

<button type="button" class="btn close_modal" data-toggle="modal" data-target="#Modal">Close</button>

ボタンのクラスに追加されたクラスclose_modalを参照してください

ここで、既存のすべてのモーダルを閉じるために、 

$(".close_modal").trigger("click");

だから、モーダルを開きたいところはどこでも

上記のコードを追加するだけで、開いているすべてのモーダルが閉じられます。

次に、通常のコードを追加して、目的のモーダルを開きます

$("#DesiredModal").modal();
— アルファ
ソース
0

モーダルダイアログボックスを非表示にします。

方法1：ブートストラップを使用します。

$('.close').click(); 
$("#MyModal .close").click();
$('#myModalAlert').modal('hide');

方法2：を使用しstopPropagation()ます。

$("a.close").on("click", function(e) {
  $("#modal").modal("hide");
  e.stopPropagation();
});

方法3：示されたメソッドの呼び出し後。

$('#myModal').on('shown', function () {
  $('#myModal').modal('hide');
})

方法4： CSSを使用する。

this.display='block'; //set block CSS
this.display='none'; //set none CSS after close dialog
— バラティラージャ
ソース
0

このコードは、モーダルを閉じて開いて、新しいモーダルを開きますが、すぐに新しいモーダルが閉じます。

$(nameClose).modal('hide');
$(nameOpen).modal('show');

他を閉じた後に新しいモーダルを開くための私の解決策は次のとおりです。

function swapModals(nameClose,nameOpen) {
    $(nameClose).modal('hide');
    $(nameClose).on('hidden.bs.modal', function () {
        console.log('Fired when hide event has finished!');
        $(nameOpen).modal('show');
    });
}
— エイドリアン・ガルシア・サバテ
ソース
0

このコードをコピーして貼り付けるだけで、2つのモーダルを試すことができます。2番目のモーダルは、最初のモーダルを閉じた後に開きます。

<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Modal Heading</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                Modal body..
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>

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



<!-- The Modal 2 -->
<div class="modal" id="myModal2">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Second modal</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                Modal body..
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>

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




<script>
    $('#myModal').on('hidden.bs.modal', function () {
        $('#myModal2').modal('show')
    })
</script>

乾杯！

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