javascript - 複数のモーダル オーバーレイ

Question

オーバーレイが背面ではなく、最初のモーダルの上に表示されるようにする必要があります。

$('#openBtn').click(function(){
	$('#myModal').modal({show:true})
});

<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">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">Modal title</h4>
        </div><div class="container"></div>
        <div class="modal-body">
          Content for the dialog / modal goes here.
          <br>
          <br>
          <br>
          <br>
          <br>
          <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal</a>
        </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 class="modal" id="myModal2" data-backdrop="static">
	<div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">Second Modal title</h4>
        </div><div class="container"></div>
        <div class="modal-body">
          Content for the dialog / modal goes here.
        </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>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script>

の を変更しようとしましたz-indexが.modal-backdrop、ぐちゃぐちゃになってしまいます。

場合によっては、同じページに 2 つ以上のモーダルがあります。

Answer 1

A1rPunの回答とStriplingWarriorの提案を組み合わせて、私はこれを思いつきました:

$(document).on({
    'show.bs.modal': function () {
        var zIndex = 1040 + (10 * $('.modal:visible').length);
        $(this).css('z-index', zIndex);
        setTimeout(function() {
            $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
        }, 0);
    },
    'hidden.bs.modal': function() {
        if ($('.modal:visible').length > 0) {
            // restore the modal-open class to the body element, so that scrolling works
            // properly after de-stacking a modal.
            setTimeout(function() {
                $(document.body).addClass('modal-open');
            }, 0);
        }
    }
}, '.modal');

事後に追加された動的モーダルでも機能し、2 番目のスクロールバーの問題を取り除きます。これが役立つとわかった最も注目すべきことは、モーダル内のフォームを Bootbox アラートからの検証フィードバックと統合することでした。これらは動的モーダルを使用し、イベントを .modal ではなくドキュメントにバインドする必要があるためです。モーダル。

ここでフィドル。

Answer 2

Yermo Lamers の提案に基づく短いバージョンの何か、これは問題なく動作するようです。フェードイン/フェードアウトやクレイジーなバットマン新聞の回転などの基本的なアニメーションでも. http://jsfiddle.net/ketwaroo/mXy3E/

$('.modal').on('show.bs.modal', function(event) {
    var idx = $('.modal:visible').length;
    $(this).css('z-index', 1040 + (10 * idx));
});
$('.modal').on('shown.bs.modal', function(event) {
    var idx = ($('.modal:visible').length) -1; // raise backdrop after animation.
    $('.modal-backdrop').not('.stacked').css('z-index', 1039 + (10 * idx));
    $('.modal-backdrop').not('.stacked').addClass('stacked');
});

Answer 3

Bootstrap 4.5 のシンプルなソリューション

.modal.fade {
  background: rgba(0, 0, 0, 0.5);
}

.modal-backdrop.fade {
  opacity: 0;
}

Answer 4

ここに投稿された多くのアイデアを組み込んだ Bootstrap プラグインを作成しました。

Bootply のデモ: http://www.bootply.com/cObcYInvpq

Github: https://github.com/jhaygt/bootstrap-multimodal

また、背景がどんどん暗くなる連続したモーダルの問題にも対処します。これにより、常に 1 つの背景だけが表示されるようになります。

if(modalIndex > 0)
    $('.modal-backdrop').not(':first').addClass('hidden');

表示される背景の z-index は、show.bs.modalとhidden.bs.modalイベントの両方で更新されます。

$('.modal-backdrop:first').css('z-index', MultiModal.BASE_ZINDEX + (modalIndex * 20));

Answer 5

スタッキングモーダルを解決すると、メインページが閉じられたときにメインページがスクロールされるため、Bootstrap の新しいバージョン (少なくともバージョン 3.0.3 以降) では、モーダルをスタックするための追加コードが必要ないことがわかりました。

ページに複数のモーダル (もちろん異なる ID を持つ) を追加できます。複数のモーダルを開いたときに見つかった唯一の問題は、1 つを閉じるとmodal-openボディ セレクターのクラスが削除されることです。

次の Javascript コードを使用して、 を再度追加できますmodal-open。

$('.modal').on('hidden.bs.modal', function (e) {
    if($('.modal').hasClass('in')) {
    $('body').addClass('modal-open');
    }    
});

スタックされたモーダルの背景効果が必要ない場合は、 を設定できますdata-backdrop="false"。

バージョン 3.1.1。モーダルのスクロールバーにオーバーレイするモーダルの背景を修正しましたが、上記の解決策は以前のバージョンでも機能するようです。

Answer 6

Bootstrap 4 のソリューションを探している場合は、純粋な CSS を使用した簡単なソリューションがあります。

.modal.fade {
    background: rgba(0,0,0,0.5);
}

Answer 7

やっと解決。私は多くの方法でそれをテストし、正常に動作します。

同じ問題を抱えている人のための解決策は次のとおりです: Modal.prototype.show関数を変更します (bootstrap.js または modal.js)。

から：

if (transition) {
   that.$element[0].offsetWidth // force reflow
}   

that.$element
   .addClass('in')
   .attr('aria-hidden', false)

that.enforceFocus()

に：

if (transition) {
    that.$element[0].offsetWidth // force reflow
}

that.$backdrop
   .css("z-index", (1030 + (10 * $(".modal.fade.in").length)))

that.$element
   .css("z-index", (1040 + (10 * $(".modal.fade.in").length)))
   .addClass('in')
   .attr('aria-hidden', false)

that.enforceFocus()

私が見つけた最良の方法です。開いているモーダルの数を確認し、モーダルと背景の z-index をより高い値に変更します。

Answer 8

bootply で JS に以下を追加してみてください

$('#myModal2').on('show.bs.modal', function () {  
$('#myModal').css('z-index', 1030); })

$('#myModal2').on('hidden.bs.modal', function () {  
$('#myModal').css('z-index', 1040); })

説明：

(Chrome の開発ツールを使用して) 属性をいじってみたところ、z-index以下の値1031は背景の背後にあることに気付きました。

したがって、ブートストラップのモーダル イベント ハンドルを使用して、 を に設定z-indexし1030ます。を表示し、裏を非表示の場合#myModal2に設定します。z-index1040#myModal2

デモ

Answer 9

sys.showModal 関数を実行するたびに、z-index をインクリメントし、新しいモーダルに設定します。

function system() {

    this.modalIndex = 2000;

    this.showModal = function (selector) {
        this.modalIndex++;

        $(selector).modal({
            backdrop: 'static',
            keyboard: true
        });
        $(selector).modal('show');
        $(selector).css('z-index', this.modalIndex );       
    }

}

var sys = new system();

sys.showModal('#myModal1');
sys.showModal('#myModal2');

Answer 10

編集: Bootstrap 3.3.4 はこの問題 (およびその他のモーダルの問題) を解決したので、ブートストラップの CSS と JS を更新できれば、それが最善の解決策になります。更新できない場合でも、以下のソリューションは引き続き機能し、基本的にはブートストラップ 3.3.4 と同じことを行います (再計算してパディングを適用します)。

Bass Jobsen が指摘したように、Bootstrap の新しいバージョンでは z-index が解決されています。modal-open クラスと padding-right は私にとっては依然として問題でしたが、Yermo Lamers ソリューションに触発されたこのスクリプトはそれを解決します。JS ファイルにドロップしてお楽しみください。

$(document).on('hide.bs.modal', '.modal', function (event) {
    var padding_right = 0;
    $.each($('.modal'), function(){
        if($(this).hasClass('in') && $(this).modal().data('bs.modal').scrollbarWidth > padding_right) {
            padding_right = $(this).modal().data('bs.modal').scrollbarWidth
        }
    });
    $('body').data('padding_right', padding_right + 'px');
});

$(document).on('hidden.bs.modal', '.modal', function (event) {
    $('body').data('open_modals', $('body').data('open_modals') - 1);
    if($('body').data('open_modals') > 0) {
        $('body').addClass('modal-open');
        $('body').css('padding-right', $('body').data('padding_right'));
    }
});

$(document).on('shown.bs.modal', '.modal', function (event) {
    if (typeof($('body').data('open_modals')) == 'undefined') {
        $('body').data('open_modals', 0);
    }
    $('body').data('open_modals', $('body').data('open_modals') + 1);
    $('body').css('padding-right', (parseInt($('body').css('padding-right')) / $('body').data('open_modals') + 'px'));
});

Answer 11

各モーダルには異なる ID を指定し、各リンクには異なるモーダル ID をターゲットにする必要があります。したがって、次のようになります。

<a href="#myModal" data-toggle="modal">
...
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
...
<a href="#myModal2" data-toggle="modal">
...
<div id="myModal2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
...

Answer 12

マルチモーダルの開閉に対応

jQuery(function()
{
    jQuery(document).on('show.bs.modal', '.modal', function()
    {
        var maxZ = parseInt(jQuery('.modal-backdrop').css('z-index')) || 1040;

        jQuery('.modal:visible').each(function()
        {
            maxZ = Math.max(parseInt(jQuery(this).css('z-index')), maxZ);
        });

        jQuery('.modal-backdrop').css('z-index', maxZ);
        jQuery(this).css("z-index", maxZ + 1);
        jQuery('.modal-dialog', this).css("z-index", maxZ + 2);
    });

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

           var maxZ = 1040;

           jQuery('.modal:visible').each(function()
           {
               maxZ = Math.max(parseInt(jQuery(this).css('z-index')), maxZ);
           });

           jQuery('.modal-backdrop').css('z-index', maxZ-1);
       }
    });
});

デモ

https://www.bootply.com/cObcYInvpq#

Answer 13

同様のシナリオがあり、少しの研究開発の後、解決策を見つけました。私は JS が得意ではありませんが、小さなクエリを書き留めることができました。

http://jsfiddle.net/Sherbrow/ThLYb/

<div class="ingredient-item" data-toggle="modal" data-target="#myModal">test1 <p>trerefefef</p></div>
<div class="ingredient-item" data-toggle="modal" data-target="#myModal">tst2 <p>Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p></div>
<div class="ingredient-item" data-toggle="modal" data-target="#myModal">test3 <p>afsasfafafsa</p></div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>





$('.ingredient-item').on('click', function(e){

   e.preventDefault();

    var content = $(this).find('p').text();

    $('.modal-body').html(content);

});

Answer 14

他のソリューションは、そのままでは機能しませんでした。おそらく、Bootstrap (3.3.2) の最新バージョンを使用しているためだと思います。モーダル ダイアログ の上にオーバーレイが表示されていました。

コードを少しリファクタリングし、モーダル背景を調整していた部分をコメントアウトしました。これで問題は解決しました。

    var $body = $('body');
    var OPEN_MODALS_COUNT = 'fv_open_modals';
    var Z_ADJUSTED = 'fv-modal-stack';
    var defaultBootstrapModalZindex = 1040;

    // keep track of the number of open modals                   
    if ($body.data(OPEN_MODALS_COUNT) === undefined) {
        $body.data(OPEN_MODALS_COUNT, 0);
    }

    $body.on('show.bs.modal', '.modal', function (event)
    {
        if (!$(this).hasClass(Z_ADJUSTED))  // only if z-index not already set
        {
            // Increment count & mark as being adjusted
            $body.data(OPEN_MODALS_COUNT, $body.data(OPEN_MODALS_COUNT) + 1);
            $(this).addClass(Z_ADJUSTED);

            // Set Z-Index
            $(this).css('z-index', defaultBootstrapModalZindex + (1 * $body.data(OPEN_MODALS_COUNT)));

            //// BackDrop z-index   (Doesn't seem to be necessary with Bootstrap 3.3.2 ...)
            //$('.modal-backdrop').not( '.' + Z_ADJUSTED )
            //        .css('z-index', 1039 + (10 * $body.data(OPEN_MODALS_COUNT)))
            //        .addClass(Z_ADJUSTED);
        }
    });
    $body.on('hidden.bs.modal', '.modal', function (event)
    {
        // Decrement count & remove adjusted class
        $body.data(OPEN_MODALS_COUNT, $body.data(OPEN_MODALS_COUNT) - 1);
        $(this).removeClass(Z_ADJUSTED);
        // Fix issue with scrollbar being shown when any modal is hidden
        if($body.data(OPEN_MODALS_COUNT) > 0)
            $body.addClass('modal-open');
    });

補足として、これを AngularJs で使用する場合は、コードをモジュールの .run() メソッド内に配置するだけです。

Answer 15

モーダルの数を確認し、値を z-index として背景に追加します

    var zIndex = 1500 + ($('.modal').length*2) + 1;
    this.popsr.css({'z-index': zIndex});

    this.popsr.on('shown.bs.modal', function () {
        $(this).next('.modal-backdrop').css('z-index', zIndex - 1);
    });

    this.popsr.modal('show');

Answer 16

$(window).scroll(function(){
    if($('.modal.in').length && !$('body').hasClass('modal-open'))
    {
              $('body').addClass('modal-open');
    }

});

Answer 17

残念ながらコメントするほどの評判はありませんが、1040 z-index のハードコーディングされたベースラインを使用した受け入れられたソリューションは、ページにレンダリングされる最大 zIndex を見つけようとする zIndex 計算よりも優れているように思われることに注意してください。

特定の拡張機能/プラグインは、最上位の DOM コンテンツに依存しているようです。これにより、.Max の計算が非常に大きくなり、zIndex をそれ以上インクリメントできなくなります。これにより、モーダルの上にオーバーレイが正しく表示されないモーダルが発生します (Firebug/Google Inspector ツールを使用すると、zIndex が 2^n - 1 のオーダーで表示されます)。

z-Index のさまざまな形式の Math.Max がこのシナリオにつながる特定の理由を特定することはできませんでしたが、発生する可能性があり、少数のユーザーに固有のように見えます。（ブラウザスタックでの私の一般的なテストでは、このコードは完全に機能していました）。

これが誰かに役立つことを願っています。