19

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

6 に答える 6

16

よし、みんな後ろに下がって。私はこれを持っています。

この方法は、他の方法に存在するパディングとスクロールの問題の両方を無効にし (下を参照)、[IMO] 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>

ヒント:これを複数回行う必要がない限り、インラインバージョンを使用することをお勧めします。

他の回答に存在する問題

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

@Deepak によって報告された問題を確認できます。さらに、モーダルを別のモーダルから開くたびに、ページがインクリメントされ、"padding-right" が +17px ずつ適用されます (これを行うには、モーダルをページよりも高くする必要がある場合があります)。これは、このページのほとんどすべてのメソッドに当てはまります。これらの問題を回避する方法については、私の回答を参照してください。// マシュー・ハドソン

于 2017-06-06T13:53:14.370 に答える
4 
<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);
});
于 2016-11-20T19:00:20.160 に答える
1

@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;}
于 2016-07-26T16:04:06.363 に答える
0

ブートストラップの 2 番目のポップアップを閉じると、2 番目のみが閉じ、最初は開いています

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

例

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal1" data-dismiss="modal">Close</button>
于 2017-05-11T09:19:25.893 に答える