Modal Bootstrap pojawiający się pod tłem

Problem ma związek z pozycjonowaniem kontenerów nadrzędnych. Możesz łatwo "przenieść" swój modal z tych kontenerów przed wyświetlaniem go. Oto jak to zrobić, jeśli byłeś show ing modal używając js:

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

Lub, jeśli uruchomisz modal za pomocą przycisków, upuść .modal('show'); i po prostu zrób:

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

To zachowa wszystkie normalne funkcje, pozwalając na wyświetlenie modalu za pomocą przycisku.

Próbowałem wszystkich opcji podanych powyżej, ale nie udało mi się ich użyć.

Co zadziałało: Ustawienie indeksu z .modal-tło do -1.

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

Upewnij się również, że wersje Bootstrap css i js są takie same. Różne wersje mogą również sprawić, że modalne pojawią się pod tłem:

Na przykład:

Zły:

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

Dobre:

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

Również napotkałem ten problem i Żadne z rozwiązań nie działało dla mnie, dopóki nie zorientowałem się, że nie potrzebuję tła. Możesz łatwo usunąć tło za pomocą następującego kodu.

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

Uwaga : atrybut data-backdrop musi być ustawiony na false (inne opcje: static lub true).

Dostałem go do pracy, dając wysoką wartość z-index do okna modalnego Po otwarciu. Np.:

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

Rozwiązanie dostarczone przez @Muhd jest najlepszym sposobem, aby to zrobić. Ale jeśli utknąłeś w sytuacji, w której zmiana struktury strony nie jest opcją, Użyj tej sztuczki:

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

Sztuczka tutaj jest data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);" usuwając domyślne tło i tworząc atrapę, ustawiając kolor tła samego okna za pomocą Alfy.

Update 1: Jak zauważył @Gustyn, kliknięcie w tło nie zamyka okna dialogowego tak, jak jest to oczekiwane. Więc do aby to osiągnąć, musisz dodać trochę kodu java script. Oto kilka przykładów, jak można to osiągnąć.

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

A ale późno na to, ale tutaj jest ogólne rozwiązanie -

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

Odwiedź ten link - Bootstrap 3 - modalne znikanie poniżej tła podczas korzystania ze stałego paska bocznego Po szczegóły.

Innym sposobem jest usunięcie indeksu z .modal-backdrop w bootstrap.css. Spowoduje to, że tło będzie na tym samym poziomie, co reszta ciała (nadal będzie blaknąć), a Twój modal będzie na wierzchu.

.modal-backdrop wygląda tak

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

Wystarczy dodać dwie linie CSS:

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

The .modal-backdrop powinien mieć wartość 1050 aby ustawić ją nad paskiem navbara.

Po prostu ustawiłem:

#myModal {
    z-index: 1500;
}

Na pytanie pierwotne:

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

Ten problem często występuje podczas używania gradientów w CSS do takich rzeczy jak tła lub nawet nagłówki akordeonów.

Niestety, modyfikowanie lub nadpisywanie core Bootstrap CSS jest niepożądane i może prowadzić do niepożądanych efektów ubocznych. Najmniej inwazyjnym podejściem jest dodanie data-backdrop="false", ale możesz zauważyć, że efekt zanikania nie działa już zgodnie z oczekiwaniami.

Po ostatnich wydaniach Bootstrap, wersja 3.3.5 wydaje się rozwiązywać ten problem bez niechcianej strony efekty.

Pobierz: https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip

Pamiętaj, aby dołączyć pliki CSS i pliki JavaScript z 3.3.5.

Witam miałem ten sam problem wtedy zdaję sobie sprawę, że gdy używasz bootsrap 3.1 W przeciwieństwie do starszych wersji bootsrap (2.3.2) struktura html modalu została zmieniona!

Musisz owinąć ciało nagłówka modalnego i stopkę za pomocą modal-dialog i 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>

Miałem ten problem i najprostszym sposobem na jego naprawienie był addind z-index większy niż 1040 w modal-dialog Div:

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

Wierzę, że Bootstrap tworzy fade modal-tło div, w którym w moim przypadku ma indeks z 1040, więc jeśli umieścisz okno modal-dialog na górze, nie powinno być już szare.

Użyj tego w modalu:

data-backdrop="false" 

Żadne z powyższych rozwiązań nie zadziałało dla mnie, ale ta technika rozwiązała problem:

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

Ustaw indeks Z.modal do najwyższej wartości

Na przykład, .sidebarwrapper ma indeks z 1100, więc ustaw Indeks z .modal to 1101

.modal {
    z-index: 1101;
}

Mam lżejsze i lepsze rozwiązanie..

Można go łatwo rozwiązać za pomocą dodatkowych stylów CSS..

1. Ukryj klasę .modal-backdrop (automatycznie wygenerowaną z Bootstrap.js)

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

2. Ustaw tło .modal na przezroczyste czarne tło.

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

Będzie to działać najlepiej, jeśli masz wymóg, który wymaga, aby modal znajdował się wewnątrz elementu, a nie w pobliżu tagu </body>..

W moim przypadku Rozwiąż to, dodaj to w moim arkuszu stylów:

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

Z Google debugger, może badać tło elementu i modyfikować atrybuty. Goog luck.

In your navbar navbar-fixed-top need z-index = 1041 a także jeśli u użyć bootstarp-combined.min.css również zmienić .navbar-fixed-top, .navbar-fixed-bottom z-index to 1041

Zmień pozycję absolutną na względną.

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

Możesz również usunąć Indeks z .modal-tło. Powstały css wyglądałby tak.

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

Znajduję to, że:

W bootstrap 3.3.0 to nie jest w porządku, ale gdy w bootstrap 3.3.5 to jest w porządku.zobaczmy kod. 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)

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

Obejmowałoby to wszystkie Modale bez zakłócania animacji lub oczekiwanego zachowania..

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

W moim przypadku miałem opakowanie z następującym:

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

Usunąłem tylko z-index: 1 i nie mam pojęcia, dlaczego Naprawiono problem. również na pewno usunięcie względnej pozycji nie, ale potrzebowałem go.

W moim przypadku przyczyną był boostrap./ min.css:) kiedy wyłączyłem go z pliku html jako referencję, okno dialogowe pokazywało się w forn odcień modalny:)

Usunąłem tło modalne.

.modal-backdrop {
    display:none;
}

Naprawiłem to dodając styl poniżej do znacznika DIV

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

I dodaj własny css

.modal-backdrop {position: relative;}

Spróbuj nadpisać klasę .modal - Otwarta wartość przepełnienia od ukrytej do widocznej.

.modal-open {
    overflow: visible;
}