Programing

배경 아래에 나타나는 부트 스트랩 모달

lottogame 2020. 2. 9. 20:26
반응형

배경 아래에 나타나는 부트 스트랩 모달

Bootstrap 예제에서 직접 모달 코드를 사용했으며 bootstrap.js 만 포함하고 bootstrap-modal.js는 포함하지 않았습니다. 그러나 내 모달이 회색 페이드 (배경) 아래에 나타나고 편집 할 수 없습니다.

그 모습은 다음과 같습니다.

배경 뒤에 모달 숨기기

이 문제를 재현 하는 한 가지 방법 은 이 바이올린 을 참조하십시오 . 해당 코드의 기본 구조는 다음과 같습니다.

<body>
    <p>Lorem ipsum dolor sit amet.</p>    

    <div class="my-module">
        This container contains the modal code.
        <div class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">Modal</div>
                </div>
            </div>
        </div>
    </div>
</body>

body {
    padding-top: 50px;
}

.my-module {
    position: fixed;
    top: 0;
    left: 0;
}

이것이 왜 또는이 문제를 해결하기 위해 할 수있는 아이디어가 있습니까?

모달 컨테이너가 고정 또는 상대 위치를 가지고 있거나 고정 또는 상대 위치를 가진 요소 내에있는 경우이 동작이 발생합니다.

모달 컨테이너와 모든 상위 요소가 문제를 해결하는 기본 방법으로 배치되어 있는지 확인하십시오.

이를 수행하는 몇 가지 방법이 있습니다.

  1. 가장 쉬운 방법은 모달 div를 이동하여 특별한 위치 지정을 가진 요소 외부에 있도록하는 것입니다. 하나의 좋은 장소는 닫는 body 태그 바로 앞에있을 수 있습니다 </body>.
  2. 또는 position:문제가 사라질 때까지 모달과 조상에서 CSS 속성을 제거 할 수 있습니다. 그러나 페이지 모양과 기능이 변경 될 수 있습니다.

문제는 부모 컨테이너의 위치와 관련이 있습니다. 이러한 컨테이너에서 모달을 표시하기 전에 쉽게 "이동"할 수 있습니다. showjs를 사용하여 모달을 작성하는 경우 수행 방법은 다음과 같습니다 .

$('#myModal').appendTo("body").modal('show');

또는 버튼을 사용하여 모달을 시작하는 경우을 삭제 .modal('show');하고 다음을 수행하십시오.

$('#myModal').appendTo("body")

이렇게하면 모든 일반 기능이 유지되므로 버튼을 사용하여 모달을 표시 할 수 있습니다.

위에 제공된 모든 옵션을 시도했지만 해당 옵션을 사용하여 작동하지 않았습니다.

작동 방식 : .modal-backdrop의 z- 색인을 -1로 설정

.modal-backdrop {
  z-index: -1;
}

또한 BootStrap css 및 js의 버전이 동일한 지 확인하십시오. 다른 버전은 배경 아래에 모달을 표시 할 수도 있습니다.

예를 들면 다음과 같습니다.

나쁜:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

좋은:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

나는 또한이 문제에 직면했으며 실제로 배경이 필요하지 않다는 것을 알 때까지는 어떤 해결책도 나를 위해 일하지 않았다. 다음 코드를 사용하여 배경을 쉽게 제거 할 수 있습니다.

<div class="modal fade" id="createModal" data-backdrop="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Create Project</h4>
            </div>
            <div class="modal-body">Not yet made</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

참고 : data-backdrop속성을 false( 기타 옵션 : static또는 true) 으로 설정해야합니다 .

모달 창을 연 후에 높은 z- 인덱스 값을 제공하여 작동하도록 했습니다. 예 :

$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");

@Muhd가 제공하는 솔루션이 최선의 방법입니다. 그러나 페이지의 구조를 변경하는 것이 옵션이 아닌 상황에 빠지면 다음과 같은 트릭을 사용하십시오.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"
                aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </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>

여기서 트릭 data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);"은 기본 배경을 제거하고 대화 상자 자체의 배경색을 알파로 설정하여 더미 배경을 만드는 것입니다.

업데이트 1 : @Gustyn이 지적한 것처럼 배경을 클릭해도 대화 상자가 닫히지 않습니다. 따라서 자바 스크립트 코드를 추가해야합니다. 다음은이를 달성 할 수있는 몇 가지 예입니다.

$('.modal').click(function(event){
    $(event.target).modal('hide');
});

늦었지만 이것에 대해서는 일반적인 해결책이 있습니다.

    var checkeventcount = 1,prevTarget;
    $('.modal').on('show.bs.modal', function (e) {
        if(typeof prevTarget == 'undefined' || (checkeventcount==1 && e.target!=prevTarget))
        {  
          prevTarget = e.target;
          checkeventcount++;
          e.preventDefault();
          $(e.target).appendTo('body').modal('show');
        }
        else if(e.target==prevTarget && checkeventcount==2)
        {
          checkeventcount--;
        }
     });

자세한 내용 은 고정 사이드 바를 사용하는 경우이 링크 ( Bootstrap 3-모달이 배경 아래에서 사라짐) 로 이동하십시오.

이것에 접근하는 다른 방법은 .modal-backdropin bootstrap.css 에서 z-index를 제거하는 것 입니다. 이것은 배경이 몸의 나머지 부분과 같은 레벨에 있고 (여전히 퇴색 될 것입니다) 모달이 맨 위에있게합니다.

.modal-backdrop 이것처럼 보입니다

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000000;
}

두 줄의 CSS를 추가하십시오.

.modal-backdrop{z-index: 1050;}
.modal{z-index: 1060;}

.modal-backdrop은 탐색 표시 줄에 설정하려면 1050 값을 가져야합니다.

나는 단순히 설정했다 :

#myModal {
    z-index: 1500;
}

그리고 그것은 작동합니다 ....

원래 질문의 경우 : 

.my-module {
    z-index: 1500;
}

이 문제는 배경이나 아코디언 헤더와 같은 CSS에 그라디언트와 같은 것을 사용할 때 종종 발생할 수 있습니다.

불행히도 핵심 Bootstrap CSS를 수정하거나 재정의하는 것은 바람직하지 않으며 원하지 않는 부작용을 초래할 수 있습니다. 가장 방해가되지 않는 접근 방법은 추가하는 data-backdrop="false"것이지만 페이드 효과가 더 이상 예상대로 작동하지 않을 수 있습니다.

Bootstrap의 최신 릴리스를 수행 한 후 버전 3.3.5는 원하지 않는 부작용없이이 문제를 해결하는 것으로 보입니다.

다운로드 : https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip

3.3.5의 CSS 파일과 JavaScript 파일을 포함해야합니다.

안녕하세요. 같은 문제가 있었는데 bootsrap 3.1을 사용할 때 이전 버전의 bootsrap (2.3.2)과 달리 모달의 html 구조가 변경되었습니다!

모달 대화 상자와 모달 내용으로 모달 머리글 본문과 바닥 글을 감싸 야합니다. 

<div class="modal hide fade">

  <div class="modal-dialog">
    <div class="modal-content">

    **here goes the modal header body and footer**

    </div>
  </div>

 </div>

이것을 모달에서 사용하십시오 : 

data-backdrop="false"

나는이 문제가 있었고 그것을 해결하는 가장 쉬운 방법은 modal-dialog div에서 1040보다 큰 z-index를 addind했다.

<div class="modal-dialog" style="z-index: 1100;">

부트 스트랩은 z-index 1040을 갖는 div 모달 배경 페이드를 생성한다고 생각합니다. 따라서 모달 대화 상자를 맨 위에 놓으면 더 이상 회색으로 표시되지 않아야합니다.

애니메이션이나 예상되는 동작을 방해하지 않고 모든 모달을 다룰 수 있습니다. 

$(document).on('show.bs.modal', '.modal', function () {
  $(this).appendTo('body');
});

위의 제안 된 솔루션 중 어느 것도 나를 위해 효과가 없었지만이 기술로 문제가 해결되었습니다.

$('#myModal').on('shown.bs.modal', function() {
   //To relate the z-index make sure backdrop and modal are siblings
   $(this).before($('.modal-backdrop'));
   //Now set z-index of modal greater than backdrop
   $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});

z-index .modal을 가장 높은 값으로 설정하십시오.

예를 들어 .sidebarwrapper의 z-index는 1100이므로 .modal의 z-index는 1101로 설정하십시오.

.modal {
    z-index: 1101;
}

더 가볍고 더 나은 솔루션이 있습니다 ..

몇 가지 추가 CSS 스타일을 통해 쉽게 해결할 수 있습니다.

  1. 클래스 숨기기 .modal-backdrop(Bootstrap.js에서 자동 생성)

    .modal-backdrop
{
display:none;
visibility:hidden; 
position:relative
}

  2. 배경을 .modal반투명 검정색 배경 이미지로 설정합니다.

    .modal
{
background:url("http://bin.smwcentral.net/u/11361/BlackTransparentBackground.png")
// translucent image from google images 
z-index:1100; 
}

이것은 모달이 </body>태그 근처가 아닌 요소 내부에 있어야하는 요구 사항이있는 경우 가장 효과적입니다 .

내 경우에는 그것을 해결하고 스타일 시트에 이것을 추가하십시오.

.modal-backdrop{
  z-index:0;
}

Google 디버거를 사용하여 BACKDROP 요소를 검사하고 속성을 수정할 수 있습니다. 구운.

당신의 네비게이션 바의에 navbar-fixed-top필요 z-index = 1041하고 또한 u는 사용하는 경우 bootstarp-combined.min.css도 변화.navbar-fixed-top, .navbar-fixed-bottom z-index to 1041

절대 위치를 상대로 변경하십시오.

.modal-backdrop {
    position: relative;
    /* ... */
}

.modal-backdrop에서 z- 색인을 제거 할 수도 있습니다. 결과 CSS는 다음과 같습니다.

.modal-backdrop {
}
  .modal-backdrop.in {
    opacity: .35;
    filter: alpha(opacity=35); }

모달 배경을 제거했습니다.

.modal-backdrop {
    display:none;
}

이것은 더 나은 해결책은 아니지만 나를 위해 작동합니다.

내가 찾은 것은 :

부트 스트랩 3.3.0에서는 맞지 않지만 부트 스트랩 3.3.5에서는 맞습니다. 코드를 보자. 3.3.0 :

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
    .prependTo(this.$element)

3.3.5

  this.$backdrop = $(document.createElement('div'))
        .addClass('modal-backdrop ' + animate)
        .appendTo(this.$body)

아래 스타일을 DIV 태그에 추가 하여이 문제를 해결했습니다.

style="background-color: rgba(0, 0, 0, 0.5);"

맞춤 CSS 추가

.modal-backdrop {position: relative;}

$('.modal').insertAfter($('body'));

나를 위해 가장 쉬운 해결책은 모달을 .modal-backdrop보다 절대 위치와 z- 인덱스가 높은 래퍼에 넣는 것입니다. 모달 배경 (적어도 필자의 경우)에는 z- 인덱스 1050이 있기 때문에 :

.my-modal-wrapper {
  position: absolute;
  z-index: 1060;
}
<div class="my-modal-wrapper"></div>

제 경우에는 다음과 같은 래퍼가 있습니다.

.wrapper { margin: 0 auto; position:relative; z-index:1;overflow:hidden;}

z-index : 1 만 제거하고 문제를 해결 한 이유를 모릅니다. 또한 상대 위치를 제거하기 위해 필요했지만 필요합니다.

내 경우에는 원인이 boostrap.min.css였습니다.) 일단 HTML 파일을 참조로 제외하면 대화 상자에 모달 그늘이 표시됩니다. :)

참고 URL : https://stackoverflow.com/questions/10636667/bootstrap-modal-appearing-under-background



반응형

'Programing' 카테고리의 다른 글

프로그램 내에서 64 비트 JVM 또는 32 비트 JVM에서 실행 중인지 어떻게 알 수 있습니까?  (0) 2020.02.09
SQL Server 트랜잭션 로그를 지우려면 어떻게합니까?  (0) 2020.02.09
JavaScript를 통해 도메인 간 POST 요청을 보내려면 어떻게합니까?  (0) 2020.02.09
WPF에서 x : Name과 Name 특성의 차이점은 무엇입니까?  (0) 2020.02.09
왜 ( 'b'+ 'a'+ + 'a'+ 'a'). toLowerCase () 'banana'의 결과입니까?  (0) 2020.02.09

'Programing'의 다른글

  • 현재글배경 아래에 나타나는 부트 스트랩 모달

관련글

댓글

티스토리툴바