복붙노트

[JQUERY] 여러 조동사 오버레이

JQUERY

여러 조동사 오버레이

해결법

  1. 1.이 많은 수정을 본 후, 그리고 그들 중 누구도 내가 @YermoLamers & @Ketwaroo에서 영감을하는 경우에도 짧은 해결책을 함께 한 필요 정확히 없었다.

    이 많은 수정을 본 후, 그리고 그들 중 누구도 내가 @YermoLamers & @Ketwaroo에서 영감을하는 경우에도 짧은 해결책을 함께 한 필요 정확히 없었다.

    배경 화면 Z- 색인 수정 이벤트 show.bs.modal가 트리거 될 때 .modal-배경이 생성되지 않기 때문에이 솔루션은의 setTimeout을 사용합니다.

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

    당신은 당신이이 같은 페이지에서 가장 높은 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

  2. 2.나는 대답이 받아 들여졌다 실현,하지만 난 강력하게이 문제를 해결하기 위해 부트 스트랩을 해킹하지 좋습니다.

    나는 대답이 받아 들여졌다 실현,하지만 난 강력하게이 문제를 해결하기 위해 부트 스트랩을 해킹하지 좋습니다.

    당신은 아주 쉽게 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'); 

    });        
});

  3. 3.Yermo Lamers '제안을 기반으로 뭔가 짧은 버전은이 작업 괜찮아 보인다. 심지어 밖으로 /에서, 심지어 미친 배트맨 신문 회전 페이드와 같은 기본적인 애니메이션. http://jsfiddle.net/ketwaroo/mXy3E/

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

  4. 4.StriplingWarrior에 의해 제안에 A1rPun의 답변을 결합, 나는이 함께했다 :

    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 경고에서 검증 피드백 조동사의 내부 형태를 통합하고 있었다위한 조동사.

    여기에 바이올린.

  5. 5.나는 많은 아이디어가 여기에 게시 통합하는 부트 스트랩 플러그인을 만들었습니다.

    나는 많은 아이디어가 여기에 게시 통합하는 부트 스트랩 플러그인을 만들었습니다.

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

    Github에서 : 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));

  6. 6.하나를 닫을 때 조동사 스크롤을 메인 페이지를 스태킹 풀 때 내가 조동사 스택에 추가 코드가 필요하지 않습니다 (버전 3.0.3 이후 적어도) 부트 스트랩의 최신 버전을 발견했다.

    하나를 닫을 때 조동사 스크롤을 메인 페이지를 스태킹 풀 때 내가 조동사 스택에 추가 코드가 필요하지 않습니다 (버전 3.0.3 이후 적어도) 부트 스트랩의 최신 버전을 발견했다.

    당신은 당신의 페이지 (물론 다른 ID를 가진의) 하나 이상의 모달를 추가 할 수 있습니다. 유일한 문제는 하나 이상의 모달이 될 것입니다 열 때 발견 한 몸 선택기에 대한 모달 오픈 클래스를 제거 폐쇄.

    당신은 모달 오픈을 다시 추가하려면 다음 자바 스크립트 코드를 사용할 수 있습니다 :

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

    경우에 당신은 데이터 배경 = "false"로 설정 할 수있는 스택 모달의 배경 효과를 필요가 없습니다.

    버전 3.1.1. 고정 수정 모달의 스크롤 막대를 오버레이 모달 배경으로하지만, 위의 솔루션은 이전 버전과 작업에도 보인다.

  7. 7.마지막으로 해결했다. 나는 많은 방법과 작품의 벌금을 테스트했다.

    마지막으로 해결했다. 나는 많은 방법과 작품의 벌금을 테스트했다.

    여기에 같은 문제가 사람을위한 솔루션입니다 : (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 인덱스와 배경을 변경하는 방법을 확인 : 그것은 내가 발견 한 가장 좋은 방법입니다.

  8. 8.당신은 부트 스트랩 4 솔루션을 찾고 있다면, 순수 CSS를 사용하여 쉽게 하나있다 :

    당신은 부트 스트랩 4 솔루션을 찾고 있다면, 순수 CSS를 사용하여 쉽게 하나있다 :

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

  9. 9.bootply에 당신의 JS에 다음을 추가하십시오

    bootply에 당신의 JS에 다음을 추가하십시오

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

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

    설명:

    (크롬의 개발 도구를 사용하여) 속성과 장난 후, 1031 아래에있는 Z- 인덱스 값이 배경 뒤에 물건을 넣어 것을 깨달았다.

    # myModal2 도시하고 # myModal2가 숨겨져있는 경우 1040 Z- 인덱스를 다시 설정하면 그래서 부트 스트랩의 모달 이벤트 핸들을 사용하여 난 (1030)에 Z- 인덱스를 설정합니다.

    데모

  10. 10.조동사 및 동적 모달의 무한한 깊이와 협력 부트 스트랩 4 내 솔루션.

    조동사 및 동적 모달의 무한한 깊이와 협력 부트 스트랩 4 내 솔루션.

    $('.modal').on('show.bs.modal', function () {
    var $modal = $(this);
    var baseZIndex = 1050;
    var modalZIndex = baseZIndex + ($('.modal.show').length * 20);
    var backdropZIndex = modalZIndex - 10;
    $modal.css('z-index', modalZIndex).css('overflow', 'auto');
    $('.modal-backdrop.show:last').css('z-index', backdropZIndex);
});
$('.modal').on('shown.bs.modal', function () {
    var baseBackdropZIndex = 1040;
    $('.modal-backdrop.show').each(function (i) {
        $(this).css('z-index', baseBackdropZIndex + (i * 20));
    });
});
$('.modal').on('hide.bs.modal', function () {
    var $modal = $(this);
    $modal.css('z-index', '');
});

  11. 11.매번 당신은 sys.showModal 기능을 증가 Z- 색인을 실행하고 새로운 모달로 설정합니다.

    매번 당신은 sys.showModal 기능을 증가 Z- 색인을 실행하고 새로운 모달로 설정합니다.

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

  12. 12.나를 위해이에 대한 해결책은 내 모달 된 div에서 "페이드"클래스를 사용하지하는 것이 었습니다.

    나를 위해이에 대한 해결책은 내 모달 된 div에서 "페이드"클래스를 사용하지하는 것이 었습니다.

  13. 13.단지 CSS를 사용하여 어떤 스크립트 솔루션은 높은 Z 인덱스에 2 모달을 설정, 당신은 조동사의 두 층이 주어지지

    단지 CSS를 사용하여 어떤 스크립트 솔루션은 높은 Z 인덱스에 2 모달을 설정, 당신은 조동사의 두 층이 주어지지

    .second-modal { z-index: 1070 }

div.modal-backdrop + div.modal-backdrop {
   z-index: 1060; 
}

  14. 14.특정 모달가 열려있는 다른 모달의 상단에 표시 할 경우, 다른 모달 DIV 후 맨 위의 모달의 HTML을 추가하려고합니다.

    특정 모달가 열려있는 다른 모달의 상단에 표시 할 경우, 다른 모달 DIV 후 맨 위의 모달의 HTML을 추가하려고합니다.

    이것은 나를 위해 일한 :

    <div id="modal-under" class="modal fade" ... />

<!--
This modal-upper should appear on top of #modal-under when both are open.
Place its HTML after #modal-under. -->
<div id="modal-upper" class="modal fade" ... />

  15. 15.각 모달 다른 ID를 부여해야하고 각 링크는 다른 모달 ID를 대상으로한다. 그래서 그런 일해야한다 :

    각 모달 다른 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>
...

  16. 16.편집 : 당신은 최고의 솔루션이 될 것 부트 스트랩 CSS와 JS를 갱신 할 수 있도록하는 경우 부트 스트랩 3.3.4은이 문제 (및 기타 모달 문제를) 해결했다. 아래의 솔루션을 업데이트 할 수없는 경우 본질적으로 여전히 작업과는 부트 스트랩 3.3.4와 같은 일을하지 않습니다 (재 계산을하고 패딩을 적용).

    편집 : 당신은 최고의 솔루션이 될 것 부트 스트랩 CSS와 JS를 갱신 할 수 있도록하는 경우 부트 스트랩 3.3.4은이 문제 (및 기타 모달 문제를) 해결했다. 아래의 솔루션을 업데이트 할 수없는 경우 본질적으로 여전히 작업과는 부트 스트랩 3.3.4와 같은 일을하지 않습니다 (재 계산을하고 패딩을 적용).

    베이스 Jobsen 지적 된 바와 같이, 부트 스트랩 최신 버전의 Z- 색인 해결있다. 모달 오픈 클래스와 패딩 오른쪽은 여전히 ​​나에게 문제가 있지만, 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'));
});

  17. 17.이것 좀 봐! 이 솔루션은 나를 위해 몇 가지 간단한 CSS 라인 문제를 해결 :

    이것 좀 봐! 이 솔루션은 나를 위해 몇 가지 간단한 CSS 라인 문제를 해결 :

    .modal:nth-of-type(even) {
z-index: 1042 !important;
}
.modal-backdrop.in:nth-of-type(even) {
    z-index: 1041 !important;
}

    여기에 내가 발견 한 곳의 링크는 다음과 같습니다 Bootply 그냥 CSS는 "도"로 찾을 수 있도록 필요가 최고에 게재하는 .modual가, 두 번째 HTML 코드에 있는지 확인하십시오.

  18. 18.열기 / 닫기 멀티 조동사에 대한 작업

    열기 / 닫기 멀티 조동사에 대한 작업

    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#

  19. 19.나를 위해, 다음과 같은 간단한하는 SCS 규칙은 완벽하게 작동 :

    나를 위해, 다음과 같은 간단한하는 SCS 규칙은 완벽하게 작동 :

    .modal.show{
  z-index: 1041;
  ~ .modal.show{
    z-index: 1043;
  }
}
.modal-backdrop.show {
  z-index: 1040;
  + .modal-backdrop.show{
    z-index: 1042;
  }
}

    잘못된 모달 원인이 규칙은 귀하의 경우 상단에있을 어느 모달 된 div의 순서를 변경하거나 (심지어)로 변경 (홀수) 위의 SCS들에서하는 경우.

  20. 20.여기에 작동하는 것 같다 n 번째의 유형 선택기를 사용하여 일부 CSS는 다음과 같습니다

    여기에 작동하는 것 같다 n 번째의 유형 선택기를 사용하여 일부 CSS는 다음과 같습니다

    .modal:nth-of-type(even) {
    z-index: 1042 !important;
}
.modal-backdrop.in:nth-of-type(even) {
    z-index: 1041 !important;
}

    Bootply : http://bootply.com/86973

  21. 21.나는 비슷한 시나리오가 있고, R & D I의 조금 후에 해결책을 발견했다. 내가 JS에 큰 아니에요하지만 여전히 나는 작은 쿼리를 적어 냈다.

    나는 비슷한 시나리오가 있고, R & D I의 조금 후에 해결책을 발견했다. 내가 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);

});

  22. 22.modal.js 글로벌 변수를 추가

    modal.js 글로벌 변수를 추가

    var modalBGIndex = 1040; // modal backdrop background
var modalConIndex = 1042; // modal container data

    // 쇼 기능 내부의 추가 변수 - Modal.prototype.backdrop

    var e    = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })

modalConIndex = modalConIndex + 2; // add this line inside "Modal.prototype.show"

that.$element
    .show()
    .scrollTop(0)
that.$element.css('z-index',modalConIndex) // add this line after show modal 

if (this.isShown && this.options.backdrop) {
      var doAnimate = $.support.transition && animate

      modalBGIndex = modalBGIndex + 2; // add this line increase modal background index 2+

this.$backdrop.addClass('in')
this.$backdrop.css('z-index',modalBGIndex) // add this line after backdrop addclass

  23. 23.다른 솔루션은 상자의 나를 위해 작동하지 않았다. 내가 (3.3.2) 부트 스트랩의 최신 버전을 사용하고 있습니다 .... 오버레이 모달 대화 상자의 상단에 표시했기 때문에 나는 아마 생각합니다.

    다른 솔루션은 상자의 나를 위해 작동하지 않았다. 내가 (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 () 메소드의 코드 내부를 넣어.

  24. 24.불행하게도 나는 코멘트에 명성을 가지고 있지 않지만, 1040 Z- 인덱스의 하드 코딩 된 기준과 허용 솔루션은 시도가 최대의 Z- 색인 페이지에 렌더링되는 찾을 수있는 Z- 색인 계산에 뛰어난 것 같다 주목해야한다.

    불행하게도 나는 코멘트에 명성을 가지고 있지 않지만, 1040 Z- 인덱스의 하드 코딩 된 기준과 허용 솔루션은 시도가 최대의 Z- 색인 페이지에 렌더링되는 찾을 수있는 Z- 색인 계산에 뛰어난 것 같다 주목해야한다.

    특정 확장 / 플러그인가 Z- 색인 더를 증가 할 수 있음을의 .Max 계산에게 이러한 음란 많은 수의 만드는 최고 수준의 DOM의 콘텐츠에 의존하는 것으로 보인다. 오버레이 잘못 모달을 통해 나타나는 모달에서이 결과를 (당신이 방화범 / 구글 검사기 도구를 사용하는 경우는 2 ^ N의 순서에 Z- 색인을 볼 수 - 1)

    나는 무슨 특별한 이유가이 시나리오에 Z- 인덱스 리드에 대한 Math.Max의 다양한 형태를 분리 할 수 ​​없었다, 그러나 일어날 수 있고, 소수의 사용자 고유 표시됩니다. (browserstack에 내 일반적인 테스트는 완벽하게이 코드 작업을했다).

    이 사람을 도움이되기를 바랍니다.

  25. 25.내 경우에는 문제가 쇼 이벤트가 두 번 처리하고 두 모달-배경 div를 추가하는 bootstrap.js 파일을 포함하는 브라우저 확장에 의해 발생했지만, 모달을 닫을 때 단지 그들 중 하나가 제거됩니다.

    내 경우에는 문제가 쇼 이벤트가 두 번 처리하고 두 모달-배경 div를 추가하는 bootstrap.js 파일을 포함하는 브라우저 확장에 의해 발생했지만, 모달을 닫을 때 단지 그들 중 하나가 제거됩니다.

    발견 크롬 상기 몸체 요소에 하위 트리 변형 브레이크를 추가하고 모달-div에 배경 화면을 추가하여 추적되는.

  26. 26.

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

});

  27. 27.업데이트 : 2019년 1월 22일, 13.41 I는 폐쇄하고 동일하거나 상이 다이얼로그를 열어 지원 jhay 의해 용액을 최적화 할 때 다른 앞뒤로 한 정보 데이터로부터 예를 들어 스텝핑.

    업데이트 : 2019년 1월 22일, 13.41 I는 폐쇄하고 동일하거나 상이 다이얼로그를 열어 지원 jhay 의해 용액을 최적화 할 때 다른 앞뒤로 한 정보 데이터로부터 예를 들어 스텝핑.

    (function ($, window) {
'use strict';

var MultiModal = function (element) {
    this.$element = $(element);
    this.modalIndex = 0;
};

MultiModal.BASE_ZINDEX = 1040;

/* Max index number. When reached just collate the zIndexes */
MultiModal.MAX_INDEX = 5;

MultiModal.prototype.show = function (target) {
    var that = this;
    var $target = $(target);

    // Bootstrap triggers the show event at the beginning of the show function and before
    // the modal backdrop element has been created. The timeout here allows the modal
    // show function to complete, after which the modal backdrop will have been created
    // and appended to the DOM.

    // we only want one backdrop; hide any extras
    setTimeout(function () {
        /* Count the number of triggered modal dialogs */
        that.modalIndex++;

        if (that.modalIndex >= MultiModal.MAX_INDEX) {
            /* Collate the zIndexes of every open modal dialog according to its order */
            that.collateZIndex();
        }

        /* Modify the zIndex */
        $target.css('z-index', MultiModal.BASE_ZINDEX + (that.modalIndex * 20) + 10);

        /* we only want one backdrop; hide any extras */
        if (that.modalIndex > 1) 
            $('.modal-backdrop').not(':first').addClass('hidden');

        that.adjustBackdrop();
    });

};

MultiModal.prototype.hidden = function (target) {
    this.modalIndex--;
    this.adjustBackdrop();

    if ($('.modal.in').length === 1) {

        /* Reset the index to 1 when only one modal dialog is open */
        this.modalIndex = 1;
        $('.modal.in').css('z-index', MultiModal.BASE_ZINDEX + 10);
        var $modalBackdrop = $('.modal-backdrop:first');
        $modalBackdrop.removeClass('hidden');
        $modalBackdrop.css('z-index', MultiModal.BASE_ZINDEX);

    }
};

MultiModal.prototype.adjustBackdrop = function () {        
    $('.modal-backdrop:first').css('z-index', MultiModal.BASE_ZINDEX + (this.modalIndex * 20));
};

MultiModal.prototype.collateZIndex = function () {

    var index = 1;
    var $modals = $('.modal.in').toArray();


    $modals.sort(function(x, y) 
    {
        return (Number(x.style.zIndex) - Number(y.style.zIndex));
    });     

    for (i = 0; i < $modals.length; i++)
    {
        $($modals[i]).css('z-index', MultiModal.BASE_ZINDEX + (index * 20) + 10);
        index++;
    };

    this.modalIndex = index;
    this.adjustBackdrop();

};

function Plugin(method, target) {
    return this.each(function () {
        var $this = $(this);
        var data = $this.data('multi-modal-plugin');

        if (!data)
            $this.data('multi-modal-plugin', (data = new MultiModal(this)));

        if (method)
            data[method](target);
    });
}

$.fn.multiModal = Plugin;
$.fn.multiModal.Constructor = MultiModal;

$(document).on('show.bs.modal', function (e) {
    $(document).multiModal('show', e.target);
});

$(document).on('hidden.bs.modal', function (e) {
    $(document).multiModal('hidden', e.target);
});}(jQuery, window));

  28. 28.조동사의 수를 확인하고 Z- 인덱스로 배경에 값을 추가

    조동사의 수를 확인하고 Z- 인덱스로 배경에 값을 추가

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

  29. 29.이 코드는 다른 코드의 문제는 모달-배경을 선택하는 방법이었다 부트 스트랩 4. 완벽하게 작동합니다. 당신이 모달가 표시 된 후 jQuery를 다음 실제 모달에서 선택 사용하면 좋을 것이다.

    이 코드는 다른 코드의 문제는 모달-배경을 선택하는 방법이었다 부트 스트랩 4. 완벽하게 작동합니다. 당신이 모달가 표시 된 후 jQuery를 다음 실제 모달에서 선택 사용하면 좋을 것이다.

    () { '.modal'기능 $ (문서) CSTE 연구진 ( 'show.bs.modal' VAR Z- 색인 = 1040 + (10 * $ () 길이 '모달.'.); VAR 모델은 $ (이) =; model.css (Z '인덱스'Z- 색인); model.attr ( '데이터 Z- 색인'Z- 색인); }); () { '.modal'기능 $ (문서) CSTE 연구진 ( 'shown.bs.modal' VAR 모델은 $ (이) =; VAR model.attr Z- 색인 = ( '데이터 Z- 색인'); model.next ( '. modal-backdrop.show')을 CSS (Z '인덱스'Z- 색인 - 1).; });

  30. 30.부트 스트랩 4.5위한 간단한 솔루션

    부트 스트랩 4.5위한 간단한 솔루션

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

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

    31. from https://stackoverflow.com/questions/19305821/multiple-modals-overlay by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를에 체크 박스 값을 가져옵니다  (0) 2020.10.12
[JQUERY] jQuery를 업로드 진행 및 AJAX 파일 업로드  (0) 2020.10.12
[JQUERY] 모달 열 스크롤에서 방지 BODY  (0) 2020.10.12
[JQUERY] 자바 스크립트 콘솔에서 jQuery를 포함  (0) 2020.10.12
[JQUERY] 어떻게 파일 입력에서 파일의 전체 경로를 얻으려면 [중복]  (0) 2020.10.12
,

티스토리툴바