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

JAVASCRIPT / 글쓴이

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