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


576

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

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


다른 사람이 열린 태그 등을 찾기 위해 시간을 검색하는 경우 왜 이런 일이 발생하는지 알아 내려고 노력하는 경우 내 모달을 깨뜨린 Feedly 크롬 확장 프로그램이었습니다. 확장 기능을 비활성화하면 동작이 정상으로 돌아 왔습니다.
threeve September

경우에 따라 iOS에서 문제가 발생 overflow-x: hidden하여 모달의 컨테이너 에 적용되어 발생할 수 있습니다.
idmean

1
3 가지 버전에서 3 가지 예를 만들었습니다. 3.3.1은 잘 작동하고 다른 것은 그렇지 않습니다. 버전 3.3.1 jsfiddle 버전 3.3.5 jsfiddle 버전 3.3.6 jsfoddle
Dimitry

1
작성된 버그 리포트 부트 스트랩 팀은이가 아닌처럼 정말 버그가 심지어 3.3.1에서 잘 근무 생각 보인다. 내가 게시 한 링크에서 자세한 내용을 읽을 수 있습니다.
Dimitry

이 문제에 직면 사람에 대한 관련성의 블로그 게시물 weblog.west-wind.com/posts/2016/Sep/14/...을

답변:


629

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

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

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

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

24
잘 잡았습니다. 참고로, 단지 "고정 된"것이 아니라, 부모의 위치 "상대적인"도이 문제를 일으킨다
Giang Nguyen

3
@ Mud 어떻게 모든 상위 요소가 기본 위치에 있는지 확인합니까?
indago

4
옵션 1을 사용하는 것이 좋습니다. "모달 div를 이동하여 특수 위치 지정을 가진 요소 외부에 배치하십시오." Thx
mpgn

9
이 답변을 이해하지 못합니다. 부트 스트랩 예제는 "modal", "modal-fade"등을 따라 여러 클래스가있는 모달 div를 보여줍니다. .modal 내부는 position : fixed를 설정하고 "modal-body"내부는 position : relative를 설정합니다. .modal이 position : fixed를 설정할 때 어떻게 모달 컨테이너를 움직여서 아무것도 바뀌게됩니까?
Carlos

4
나는 여전히이 문제를 가지고있다. 나는 직전에 추가 </body>하고 body상관 넣은 사람은 아니다 position스타일 ATTRIB을. 다른 아이디어?
Tuan Anh Tran

383

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

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

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

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

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


12
페이지에서 가질 수있는 모든 모달에 @leandrotk 솔루션이 작동하도록하려면 일반 이벤트 핸들러를 사용하십시오. $('.modal-dialog').parent().on('show.bs.modal', function(e){ $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
Patrick M.

2
@PatrickM. 놀랄 만한! 그것은 내가 맡고있는 오래된 프로젝트에서 매력처럼 작동했으며 모든 곳에서 모달이있었습니다!
denislexic

5
CSS 위치를 실제로 수정할 수 없을 때 유용합니다. 감사합니다 :)
alexcasalboni

이 작업을 수행 할 때 모든 CSS 형식을 느슨하게하는 이유가 있습니까? 그리고 쉬운 수정? :-)
Eugene van der Merwe

1
leandrotk 답변에서 #myModal을 .modal로 변경하여 $ ( '. modal'). appendTo ( "body")와 같이 변경하십시오. 기본 모달이 있으므로 모든 모달에서 작동합니다.
Ngatia Frankline

170

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

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

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

10
이것은 완벽하게 작동했으며 지금까지 가장 쉬운 솔루션입니다. 내가 사용z-index: 0;
andrewcockerham

이 옵션 만 작동하는지 확인할 수도 있습니다! 감사!
페리 Kranenburg

감사! BS3의 버그입니까?
mauriblint

1
다양한 z- 표시가있는 테마를 사용하는 경우에는 작동하지 않습니다. 예를 들어 배경을 설정하면 배경 이 페이지와 같은 페이지의 다른 요소 뒤에-1 나타납니다 . 그러나 모달 팝업을 제외한 모든 것보다 높게 설정했습니다 . 3
Justin Skiles

1
위의 답변에서 제안 된 내용을 모두 사용한 후에도 이것이 가장 빠른 방법이라는 것을 알았습니다. 필자의 경우 모달 대화 클래스를 사용하여 div를 z- 인덱스 1060으로 설정하면 오버레이 앞에서 팝되었습니다. 당신이 네비게이션 바에을 사용하는 경우, 그렇지 않으면 당신의 네비게이션 바는 ... 오버레이 ... 혼돈 insues의 상단에 팝업 수, 오버레이 위의 모달 주변이 아닌 다른 방법으로 이동할 것
마이크 Devenney

152

또한 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>

나도 마찬가지였다. 감사!
PedroTanaka

동일한 문제가 있었지만 동일한 버전의 스타일 시트 솔루션이 모든 사람을 도왔던 것 같습니다! 감사합니다
HGB

감사합니다. 이것이 정확한 문제였습니다
Malcor

Malcor 문제 없음, 나는이 버그를 알아내는 동안 많은 시간을 보냈습니다. 우리가 14 년에 보았을 때, 지금은 16 년입니다. 버그는 여전히 존재합니다. 실제로 이것은 버그가 아니지만 부트 스트랩 작성자는 이것을 문서 나 무언가에 추가해야합니다.
Sid

동일한 거래에서 SASS 생성으로 전환하여 js 파일 자체를 완전히 잊어 버렸습니다.이 답변은 최고 답변이되어야합니다. 기본적으로 항상 모달은 본문 닫기 태그 바로 앞에 포함되므로 ...
Angry 84

116

나는 또한이 문제를 겪었고 실제로 배경이 필요 없다는 것을 알기 전까지는 어떤 해결책도 나를 위해 일하지 않았다. 다음 코드를 사용하여 배경을 쉽게 제거 할 수 있습니다.

<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) 으로 설정해야합니다 .


2
지금까지 가장 쉬운 솔루션이며 매력처럼 작동합니다!
learning_to_swim

훌륭한! 또한 부트 스트랩이 필요했습니다. 다른 모든 Bootstrap 기능이 제대로 작동하는 이유를 모르지만 모달 작동이 필요했습니다.
스티브 클라인

완벽합니다 !!! 하루 동안 고생했다. 그리고 u는 또 다른 날을 구했다. 다시 한 번 감사드립니다. +1 및 건배
Bhaskara

1
모든 솔루션을주의 깊게 읽은 후 이것이 오늘날의 부트 스트랩 및 jQuery 버전에서 가장 합리적인 것으로 나타났습니다. 감사합니다.
암호화

3
감사합니다! 이 질문에 대한 견해는 140k 이상이며 부트 스트랩으로 해결할 수없는 이유를 이해하지 못합니다. 오, 건배.
차드

58

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

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

그것이 효과가 있습니까 (남자는 말합니다) 왜 당신은 투표를 거절합니까? 내가보고있는 것처럼 보일 것입니다.
Rolice

네, 왜 이것이 나쁜 대답인지 설명해 주시겠습니까? 해키의 종류일까요?
brandones

6
나는 투표를 이해하지 못한다. 네, 해 키지 만 다른 솔루션은 저에게 효과적이지 않으므로 "해키"솔루션을 사용하여 신경 쓰지 않는 사람들에게 도움이 될 것이라고 생각했습니다.
Andrew Dyster

이것은 전체 화면 요소에 모달을 넣는 특정 문제와 관련이 있습니다. +1
Jack Stone

3
그것은 해킹이기 때문에 나쁜 대답이며 이것을 나타내려고 시도하지 않습니다. 다른 답변은 "아무것도 작동하지 않으면 ..."라고 말합니다. 실제로는 모달이 웹에서 매우 널리 사용되며 올바르게 구현되면 작동해야합니다. 해키 답변은 사람들이 올바른 방식으로 일하는 방법을 알아내는 데 도움이되지 않습니다.
Lukos

35

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

이것은 배경을 클릭해도 대화 상자가 닫히지 않는 것을 제외하고 작동합니다.
Gustyn

Krishnendu u는 나의 영웅입니다. 나는 운명과 우울을 염두에두고 일하게되었다. 마지막 발표 3 일 전에이 문제에 직면하게 된 것은 갑자기 신경을 쓰지 않는 것이 었습니다. 내 친구는 슬프게도 하나만 줄 수있는 100000 upvotes를받을 자격이 있습니다.
DotNetBeginner 2016 년

이 작업을 시도 할 때 페이지의 전체 배경을 다루지 않습니다. 모달이 선언 된 div 요소 일뿐입니다.
Will Sam

완벽하게 작동했습니다. 감사합니다!
gfernandes

완벽하게 작동했습니다. 감사합니다!
Mayank Pandeyz

16

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

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

자세한 내용 은 고정 사이드 바를 사용할 때이 링크 ( 부트 스트랩 3)가 모달 아래에서 사라지는 링크를 방문 하십시오.


이것은 내가 다른 사람들의 테마에서 부모 요소를 제어 할 수없는 곳에서 만든 Wordpress 플러그인에 대한 완벽한 솔루션이었습니다.
Mark Rummel

지금까지 최고의 솔루션!
digz6666

10

이것에 접근하는 다른 방법은 .modal-backdropin bootstrap.css 에서 z-index를 제거하는 것 입니다. 이로 인해 배경이 신체의 나머지 부분과 같은 수준으로 유지되고 (여전히 희미 해짐) 모달이 맨 위에있게됩니다.

.modal-backdrop 이처럼 보입니다

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

10

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

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

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


좋지만 모달 컨테이너 position: fixed에이 기능이 없으면 작동하지 않습니다.
CPHPython

10

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

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

1
글로벌 솔루션. 그러나 문제를 찾는 것이 좋습니다.
Milad Abooali

훌륭한 해결책이라고 생각하지 않습니다. 모달이 많은 페이지는 어떻습니까? 지저분해질 수 있습니다.
Glen

어떻게 지저분 해 질지 설명해 주시겠습니까? 현재 수행중인 모든 작업은 모달이 현재 DOM의 위치에서 body 태그의 끝으로 이동하는 것입니다. 아직 존재하지 않는 것을 만들지 않고 옮기고 자동으로 최상위 z 인덱스를 제공합니다.
캠 툴 로스

최선의 해결책이라고 생각합니다. CSS를 편집하거나 모달 모양을 변경할 필요가 없음
Moslem7026

8

나는 단순히 설정했다 :

#myModal {
    z-index: 1500;
}

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

원래 질문의 경우 :

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

내 문제는 Z- 색인이었습니다.
James Lock

8

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

data-backdrop="false" 

8

이 문제는 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 파일을 포함해야합니다.


6

안녕하세요. 같은 문제가 있었는데 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>

+1 호환 가능한 bootstrap.css 및 bootstrap.js 버전을 사용하고 있으며 마크 업이 사용중인 버전과 일치하는지 확인하십시오.
srayner

예, 이것이 나의 결론이며 누군가 가이 문제가있는 경우 여기에 썼습니다.
탈 시모니

예수 그리스도,이 대답은 깊이 묻혀 있습니다. Bootstrap 4의 경우도 마찬가지입니다.
Randell

6

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

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

다른 방법으로 CSS 형식을 잃어 버렸기 때문에이 방법을 선호합니다.
유진 반 데르 메웨

6

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

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

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


6

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

몇 가지 추가 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>태그 근처가 아닌 요소 내부에 있어야하는 요구 사항이있는 경우 가장 효과적입니다 .


당신은 내 하루를 저장 ... 이것은 좋은 대안입니다!
notme

@xunga, 걱정 마세요. 이 솔루션을 다른 사람들과 공유하십시오 :)
JM Tee

여기에서 편집 내용을 볼 수 있습니다 ... stackoverflow.com/posts/42887253/revisions
notme

감사합니다 JM, 귀하의 솔루션은 저에게 효과적이었습니다.
Ahmed J.

5

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

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

.modal {
    z-index: 1101;
}

5

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

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

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


3

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



3

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

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

3

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

.modal-backdrop {
    display:none;
}

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


3

내가 찾은 것은 :

부트 스트랩 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)

3

이 페이지를 페이지에 추가하십시오. 그것은 나를 위해 작동합니다.

<script type="text/javascript">
    $('.modal').parent().on('show.bs.modal', function (e) { $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
</script>

3

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

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

맞춤 CSS 추가

.modal-backdrop {position: relative;}


3

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

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


z-index가 나를 위해 일했습니다. 고마워
Asif Iqbal

2

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

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

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

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.