web-dev-qa-db-ja.com

別のモーダルからモーダルを開き、最初の（起動）モーダルを閉じます

私はBootstrap Modal Windowプラグインはうまく動作しますが、次をクリックして最初のモデルウィンドウを閉じるときに別のモデルウィンドウを開きたいと思います。どうすればできますか？

$('[data-toggle="modal"]').click(function(e) 
    {
        e.preventDefault();
        var url = $(this).attr('href');
        if (url.indexOf('#') == 0)
        {
            $(url).modal('open');
        } 
        else 
        {
            $.get(url, function(data) 
            {
                $(data).modal();
            }).success(function() { $('input:text:visible:first').focus(); });
        }
    });

<a href="next.html" data-toggle="modal">Add Record</a>

next.htmlファイルコード

<div class="modal fade" id="compose-modal" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">First Window</h4>
            </div>
            <form action="#" method="post">

                <div class="modal-footer clearfix">
                    <button type="button" data-dismiss="modal">Discard</button>

                    <button type="submit">Submit</button>
                     <a href="next2.html" data-toggle="modal" >Next</a>
                </div>
            </form>
        </div>
    </div>
</div>
jquerytwitter-bootstrapbootstrap-modalmodal-window
13
User

より更新された答えは以下にあります： https://stackoverflow.com/a/44391959/1004312

別のモーダルからモーダルを開き、最初のモーダルを閉じています。 Bootstrap 3を使用している場合、次のことができます。

デモ： http://jsbin.com/venek/1/edit

最初のモーダルに次のモーダルへのリンクを配置します（＃modal-1＆＃modal-2はidの例です）

  <a href="#modal-2" data-toggle="modal" data-dismiss="modal">Next</a>

2番目のモーダルには、最初のモーダルへのリンクを配置します。

  <a href="#modal-1" data-toggle="modal" data-dismiss="modal">Previous</a>

デモ： http://jsbin.com/venek/1/edit

24
Christina

皆さん、大丈夫です。私はこれを持っています。

このメソッドは、他のメソッドに存在するパディングとスクロールの問題を無効にし（下を参照）、Bootstrap Modals。を使用して必要な機能を実現する最もクリーンな方法です。

インライン

<a onclick="$('.modal-to-close').one('hidden.bs.modal', function() { $('.modal-to-open').modal('show'); }).modal('hide');">Open Modal</a>

全脂肪：

<script>
    $(function () {
        $('.selector').click(function() {
            $('.modal-to-close').one('hidden.bs.modal', function() {
                $('.modal-to-open').modal('show'); 
            }).modal('hide');
        });
    });
</script>

<a class="selector">Open Modal</a>

ビーストモード：

<script>
    $(function () {
        $('[data-bm-close][data-bm-open]').on('click', function () {
            var $this = $(this);
            $($this.data('bm-close')).one('hidden.bs.modal', function () {
                $($this.data('bm-open')).modal('show');
            }).modal('hide');
        });
    });
</script>

<a data-bm-close=".modal-to-close" data-bm-open=".modal-to-open">Open Modal</a>

ヒント：これを複数回行う必要がない限り、Inline バージョン。

他の回答に存在する問題

モーダルの高さが画面よりも高い場合、問題が発生します。data-dismiss= "modal"がbodyタグからmodal-openクラスを削除するため、スクロールするとモーダルになりますスクロールしませんが、色あせた背景が動き始めます。これは悪いです。// Deepak Yadav

@ Deepakによって報告された問題を確認できます。さらに、別の内部からモーダルを開くたびに、ページは+ 17pxずつ「padding-right」をインクリメントおよび強制します（モーダルはこれが起こるためのページよりも高い）。これは、このページのほとんどすべてのメソッドに当てはまります。これらの問題を回避するメソッドについては、私の回答を参照してください。//マシューハドソン

12
Matthew Hudson
<a data-toggle="modal" data-target="#open1" data-dismiss="modal">OPEN 1</a>
<a data-toggle="modal" data-target="#open2" data-dismiss="modal">OPEN 2</a>

$('.modal).on('show.bs.modal',function(){
setTimeout(function(){
$('body').addClass('modal-open');
},800);
});
3
ucpc

@Deepak Yadavの問題：data-dismiss = "modal"は、bodyタグからmodal-openクラスを削除します。JSには1つのソリューションがあります。

クラスを次の前のリンクに追加します

     <a class="NeXTSTEP" href="#modal-2" data-toggle="modal" data-dismiss="modal">Next</a>
     <a class="previousStep" href="#modal-1" data-toggle="modal" data-dismiss="modal">previous</a>

JS：

var $body = $('body')
  $("a.NeXTSTEP").click(function(){
   $body.addClass('modal1-on')
  });
  $("a.previousStep").click(function(){
   $body.addClass('modal2-on')
  });

  $('#modal-1').on('hidden.bs.modal', function () {
  $body.removeClass('modal2-on')
  });
  $('#modal-2').on('hidden.bs.modal', function () {
  $body.removeClass('modal1-on')
  });

その後、CSS：

    body.modal1-on, body.modal2-on {overflow: hidden;}
1
serialko

u close bootstrap 2番目のポップアップ、2番目のクローズのみ、最初は開いているとき

そのため、bootstrap最初のモーダルIDで2番目のポップアップ閉じるボタンを使用できます

例

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal1" data-dismiss="modal">Close</button>
0
govind