[javascript] 여러 모달 오버레이

Program / 글쓴이

오버레이가 뒤가 아닌 첫 번째 모달 위에 표시되어야합니다.

모달 오버레이

코드 스 니펫 표시

나는 변경 시도 z-index의를.modal-backdrop 하지만 엉망이된다.

경우에 따라 같은 페이지에 둘 이상의 모달이 있습니다.

답변

이 문제에 대한 많은 수정 사항을 본 후 정확히 필요한 것은 없었습니다. @ YermoLamers & @Ketwaroo에서 영감을 얻은 더 짧은 솔루션을 생각해 냈습니다.

배경 z- 색인 수정
이 이벤트 는 이벤트 가 트리거 될 때 생성되지 setTimeout않기 때문에를 사용합니다 ..modal-backdropshow.bs.modal

$(document).on('show.bs.modal', '.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);
});
  • 이것은 .modal페이지에서 생성 된 모든 (동적 모달조차도) 작동합니다
  • 배경은 즉시 이전 모달을 오버레이합니다

예 jsfiddle

어떤 이유로 든 하드 코딩 된 z- 색인이 마음에 들지 않으면 다음과 같이 페이지 에서 가장 높은 z- 색인 을 계산할 수 있습니다 .

var zIndex = Math.max.apply(null, Array.prototype.map.call(document.querySelectorAll('*'), function(el) {
  return +el.style.zIndex;
})) + 10;

스크롤바 수정
페이지에 브라우저 높이를 초과하는 모달이있는 경우 두 번째 모달을 닫을 때 스크롤 할 수 없습니다. 이 문제를 해결하려면 다음을 추가하십시오.

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

버전
이 솔루션은 부트 스트랩 3.1.0-3.3.5로 테스트되었습니다.

답변

답변이 수락되었지만이 문제를 해결하기 위해 부트 스트랩을 해킹하지 않는 것이 좋습니다.

shown.bs.modal 및 hidden.bs.modal 이벤트 핸들러를 연결하고 z- 색인을 조정하여 동일한 효과를 쉽게 얻을 수 있습니다.

다음은 실제 예입니다

조금 더 많은 정보는 여기에 있습니다.

이 솔루션은 임의로 깊이있는 스택 모달에서 자동으로 작동합니다.

스크립트 소스 코드 :

$(document).ready(function() {

    $('.modal').on('hidden.bs.modal', function(event) {
        $(this).removeClass( 'fv-modal-stack' );
        $('body').data( 'fv_open_modals', $('body').data( 'fv_open_modals' ) - 1 );
    });

    $('.modal').on('shown.bs.modal', function (event) {
        // keep track of the number of open modals
        if ( typeof( $('body').data( 'fv_open_modals' ) ) == 'undefined' ) {
            $('body').data( 'fv_open_modals', 0 );
        }

        // if the z-index of this modal has been set, ignore.
        if ($(this).hasClass('fv-modal-stack')) {
            return;
        }

        $(this).addClass('fv-modal-stack');
        $('body').data('fv_open_modals', $('body').data('fv_open_modals' ) + 1 );
        $(this).css('z-index', 1040 + (10 * $('body').data('fv_open_modals' )));
        $('.modal-backdrop').not('.fv-modal-stack').css('z-index', 1039 + (10 * $('body').data('fv_open_modals')));
        $('.modal-backdrop').not('fv-modal-stack').addClass('fv-modal-stack');

    });
});

답변

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');
});

답변

StriplingWarrior의 제안과 A1rPun의 답변을 결합하여 다음과 같이했습니다.

$(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');

사실 이후에 추가 된 동적 모달에서도 작동하며 두 번째 스크롤 막대 문제를 제거합니다. 가장 주목할만한 점은 동적 모달을 사용하여 이벤트를 .modal 대신 문서에 바인딩해야하기 때문에 Bootbox 경고의 유효성 검사 피드백과 함께 모달 내부 양식을 모달 내부에 통합하는 것이 었습니다. 모달.

여기 바이올린

답변

여기에 게시 된 많은 아이디어를 통합 한 Bootstrap 플러그인을 만들었습니다.

Bootply 데모 : http://www.bootply.com/cObcYInvpq

깃 허브 : https://github.com/jhaygt/bootstrap-multimodal

또한 배경이 어두워지고 어두워지는 연속적인 모달 문제를 해결합니다. 이를 통해 주어진 시간에 하나의 배경 만 볼 수 있습니다.

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

보이는 배경의 z- 색인은 show.bs.modal및 hidden.bs.modal이벤트 모두에서 업데이트됩니다 .

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

답변

스태킹 모달을 해결할 때 메인 페이지가 닫히면 스크롤됩니다 됩니다. 최신 버전의 부트 스트랩 (최소 버전 3.0.3 이후)에는 모달을 스택하기 위해 추가 코드가 필요하지 않습니다.

페이지에 둘 이상의 모달 (물론 다른 ID를 가짐)을 추가 할 수 있습니다. 둘 이상의 모달을 열 때 발견되는 유일한 문제는modal-open 본문 선택기 클래스가 입니다.

다음 자바 스크립트 코드를 사용하여 다음을 다시 추가 할 수 있습니다 modal-open.

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

스택 모달에 배경 효과가 필요하지 않은 경우 설정할 수 있습니다 data-backdrop="false" .

버전 3.1.1. 고정 모달 배경 화면이 모달의 스크롤 막대를 오버레이 하지만 위의 솔루션은 이전 버전에서도 작동하는 것으로 보입니다.

답변

마침내 해결되었습니다. 여러 가지 방법으로 테스트했으며 정상적으로 작동합니다.

동일한 문제가있는 사람을위한 해결책은 다음과 같습니다. (bootstrap.js 또는 modal.js에서) Modal.prototype.show 함수 변경

에서:

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- 색인 및 배경을 더 높은 값으로 변경하십시오.