IT박스

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

itboxs 2020. 10. 4. 10:44
반응형

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

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

A 그러나 늦었지만 여기에 일반적인 해결책이 있습니다.

    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-backdrop은 bootstrap.css 에서 Z- 색인을 제거하는 것 입니다. 이렇게하면 배경이 나머지 신체와 동일한 수준에 있고 (여전히 희미 해짐) 모달이 맨 위에있게됩니다.

.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은 navbar를 통해 설정하려면 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 파일을 포함해야합니다.

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

modal-dialog 및 modal-content로 모달 머리글 본문과 바닥 글을 래핑해야합니다. 

<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를 추가하는 것입니다.

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

나는 부트 스트랩이 내 경우에는 z-index 1040이있는 div 모달 배경 페이드를 생성한다고 생각하므로 모달 대화 상자를 위에 놓으면 더 이상 회색으로 표시되지 않아야합니다.

This would cover all modals without messing up any of the animations or expected behavior.. 

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

none of the suggested solutions above worked for me but this technique solved the issue:

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

set the z-index .modal to a highest value

For example, .sidebarwrapper has z-index of 1100, so set the z-index of .modal to 1101

.modal {
    z-index: 1101;
}

I have a lighter and better solution..

It could be easily solve through some additional CSS styles..

  1. hide the class .modal-backdrop (auto generated from Bootstrap.js)

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

  2. set the background of .modal to a translucent black backdrop image.

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

This will works best if you have a requirement that needs the modal to be inside an element and not near the </body> tag..

In my case solve it, add this in my stylesheet:

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

with google debugger, can examine element BACKDROP And modify attributes. Goog luck.

in your navbar navbar-fixed-top need z-index = 1041 and also if u use bootstarp-combined.min.css the also change .navbar-fixed-top, .navbar-fixed-bottom z-index to 1041

Change the absolute position to relative.

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

You can also remove the z-index from .modal-backdrop. Resulting css would look like this. 

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

I removed modal backdrop.

.modal-backdrop {
    display:none;
}

This is not better solution, but works for me.

what i find is that:

in bootstrap 3.3.0 it's not right,but when in bootstrap 3.3.5 it's right.let's see the code. 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)

I was fixed this by adding style below to DIV tag

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

And add custom css

.modal-backdrop {position: relative;}

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

For me the easiest solution was to put my modal in a wrapper with absolute position and z-index higher than .modal-backdrop. Since modal-backdrop (at least in my case) has z-index 1050:

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

In my case, I had a wrapper with the following:

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

z-index : 1 만 제거했으며 문제가 해결 된 이유를 모릅니다. 또한 확실히 상대 위치를 제거했지만 필요했습니다.

제 경우 원인은 boostrap.min.css였습니다. :) 일단 참조로 내 html 파일에서 제외하면 대화 상자가 모달 쉐이드의 forn에 표시되었습니다. :)

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

반응형

'IT박스' 카테고리의 다른 글

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

'IT박스'의 다른글

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

관련글

댓글

티스토리툴바