Modal bootstrap muncul di bawah latar belakang

576

Saya telah menggunakan kode untuk modal saya langsung dari contoh Bootstrap, dan hanya menyertakan bootstrap.js (dan bukan bootstrap-modal.js). Namun, modal saya muncul di bawah abu-abu pudar (latar belakang) dan tidak dapat diedit.

Begini tampilannya:

modal bersembunyi di balik latar belakang

Lihat biola ini untuk satu cara mereproduksi masalah ini. Struktur dasar dari kode itu adalah seperti ini:

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

Adakah ide mengapa ini atau apa yang dapat saya lakukan untuk memperbaikinya?

javascript css twitter-bootstrap modal-dialog natlines
sumber
Seandainya ada orang lain yang mencari beberapa waktu untuk membuka tag, dll. Mencoba mencari tahu mengapa ini terjadi, bagi saya itu adalah ekstensi chrome Feedly yang merusak modalku. Menonaktifkan ekstensi mengembalikan perilaku normal.
threeve
Dalam kasus mungkin masalahnya ada di iOS dan disebabkan oleh overflow-x: hiddenditerapkan pada wadah modal.
idmean
1
Dibuat 3 contoh di 3 versi. 3.3.1 berfungsi dengan baik dan yang lainnya tidak. Versi 3.3.1 jsfiddle Versi 3.3.5 jsfiddle Versi 3.3.6 jsfoddle
Dimitry
1
Membuat laporan bug dengan tim Bootstrap sepertinya ini bukan bug yang menurut mereka bekerja dengan baik di 3.3.1. Anda dapat membaca lebih lanjut tentang hal ini di tautan yang saya posting.
Dimitry
Posting blog yang relevan bagi siapa saja yang menghadapi masalah ini weblog.west-wind.com/posts/2016/Sep/14/…

Jawaban:

629

Jika wadah modal memiliki posisi tetap atau relatif atau berada dalam elemen dengan posisi tetap atau relatif perilaku ini akan terjadi.

Pastikan wadah modal dan semua elemen induknya diposisikan sebagai cara default untuk memperbaiki masalah.

Berikut adalah beberapa cara untuk melakukan ini:

  1. Cara termudah adalah dengan hanya memindahkan modal div sehingga berada di luar elemen dengan posisi khusus. Satu tempat yang bagus mungkin tepat sebelum tag penutup tubuh </body>.
  2. Atau, Anda dapat menghapus position:properti CSS dari modal dan leluhurnya hingga masalahnya hilang. Namun, ini dapat mengubah tampilan dan fungsi halaman.
Muhd
sumber
24
Tangkapan yang bagus. FYI, bukan hanya "diperbaiki", posisi "kerabat" orangtua juga menyebabkan masalah ini
Giang Nguyen
3
@ Muhd, bagaimana Anda memastikannya dan semua elemen induknya diposisikan dengan cara default?
indago
4
Lebih suka menggunakan opsi satu: "hanya memindahkan modal div sehingga di luar elemen dengan posisi khusus". Thx
mpgn
9
Saya tidak mengerti jawaban ini. Contoh Bootstrap memperlihatkan div modal dengan sejumlah kelas di sepanjang garis "modal", "modal-fade", dll. Di dalam. Moda menetapkan posisi: tetap, dan di dalam "modal-tubuh" ia menetapkan posisi: relatif. Jadi bagaimana memindahkan wadah modal akan mengubah apa pun, ketika .modal menetapkan posisi: diperbaiki?
Carlos
4
saya masih punya masalah ini. Saya menambahkannya sebelumnya </body>dan tidak bodymemiliki positionattrib gaya. Ada ide lain?
Tuan Anh Tran
383

Masalahnya berkaitan dengan posisi wadah induk. Anda dapat dengan mudah "memindahkan" modal Anda keluar dari wadah ini sebelum menampilkannya. Inilah cara melakukannya jika Anda showmenggunakan modal Anda menggunakan js:

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

Atau, jika Anda meluncurkan modal menggunakan tombol, jatuhkan .modal('show');dan lakukan:

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

Ini akan menjaga semua fungsi normal, memungkinkan Anda untuk menunjukkan modal menggunakan tombol.

Adam Albright
sumber
12
Gunakan pengendali event generik untuk membuat solusi @leandrotk bekerja untuk semua modal yang dapat Anda miliki dalam sebuah halaman $('.modal-dialog').parent().on('show.bs.modal', function(e){ $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
Patrick M.
2
@PatrickM. Luar biasa! yang bekerja seperti pesona pada proyek lama yang saya ambil alih dan mereka punya modals di semua tempat!
denislexic
5
Ini berfungsi dengan baik ketika Anda benar-benar tidak dapat memperbaiki posisi CSS. Terima kasih :)
alexcasalboni
Apakah ada alasan mengapa saya kehilangan semua pemformatan CSS ketika saya melakukan ini? Dan perbaikan yang mudah? :-)
Eugene van der Merwe
1
Dari jawaban leandrotk, cukup ubah #myModal menjadi .modal agar terlihat seperti ini: $ ('. Modal'). AppendTo ("body"). Ini akan bekerja dengan semua modals karena mereka memiliki modal kelas default.
Ngatia Frankline
170

Saya mencoba semua opsi yang disediakan di atas tetapi tidak membuatnya bekerja menggunakan itu.

Apa yang berhasil: mengatur z-index dari .modal-backdrop ke -1.

.modal-backdrop {
  z-index: -1;
}
Jan van der Burgt
sumber
10
Ini bekerja dengan sempurna dan sejauh ini merupakan solusi termudah. Saya menggunakanz-index: 0;
andrewcockerham
Dapat juga mengonfirmasi bahwa hanya opsi ini yang berfungsi! Terima kasih!
Ferry Kranenburg
Terima kasih! Apakah ini bug pada BS3?
mauriblint
1
Ini tidak berfungsi jika Anda menggunakan tema yang memiliki banyak indeks-z beragam. Misalnya, mengatur latar belakang -1akan menyebabkannya muncul di belakang elemen lain pada halaman seperti panel. Tetapi pengaturan untuk 3membuatnya di atas segalanya kecuali modal popup.
Justin Skiles
1
Saya menemukan ini menjadi metode tercepat juga setelah menghabiskan saran dalam jawaban yang berperingkat lebih tinggi di atas. Dalam kasus saya pengaturan div dengan kelas modal-dialog ke indeks-z 1060 muncul di depan overlay. Jika Anda menggunakan navbar Anda akan ingin memindahkan modal di atas overlay dan bukan sebaliknya, jika tidak navbar Anda akan muncul di atas overlay ... chaos insues ...
Mike Devenney
152

Juga, pastikan bahwa versi BootStrap css dan js adalah versi yang sama. Versi berbeda juga dapat membuat modal muncul di bawah latar belakang:

Sebagai contoh:

Buruk:

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

Baik:

<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>
Sid
sumber
Ini juga untukku. Terima kasih!
PedroTanaka
Baru saja mengalami masalah yang sama, solusi stylesheet versi yang sama tampaknya telah membantu semua orang! Terima kasih
HGB
Terima kasih, ini adalah masalah saya yang sebenarnya
Malcor
Malcor tidak ada masalah, saya telah menghabiskan banyak waktu sementara saya menemukan bug ini. Seperti yang kita lihat di '14, sekarang '16, bug masih ada. Sebenarnya ini bukan bug, tetapi dalam bootstrap penulis harus menambahkan ini ke dalam dokumentasi mereka atau sesuatu ..
Sid
Kesepakatan yang sama di sini, kami berubah untuk menghasilkan SASS kami dan benar-benar lupa tentang file js itu sendiri .. Ini perlu menjadi jawaban teratas .. Karena modal kami selalu secara default disertakan tepat sebelum tag tutup tubuh ...
Marah 84
116

Saya juga mengalami masalah ini dan tidak ada solusi yang bekerja untuk saya sampai saya tahu saya sebenarnya tidak membutuhkan latar belakang. Anda dapat dengan mudah menghapus latar belakang dengan kode berikut.

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

Catatan : data-backdropatribut harus diatur ke false( opsi lain : staticatau true).

PieterVK
sumber
2
Sejauh ini solusi termudah, dan bekerja seperti pesona!
learning_to_swim
Cemerlang! Saya juga perlu membutuhkan bootstrap - tidak yakin mengapa semua fungsionalitas Bootstrap saya yang lain berfungsi dengan baik, tetapi saya perlu membuat modal berfungsi.
steve klein
Sempurna !!! berjuang untuk sehari .. dan kamu menyelamatkan hari yang lain. Terima kasih lagi .. +1 dan tepuk tangan
Bhaskara
1
Setelah membaca semua solusi dengan seksama, saya menemukan ini sebagai yang paling masuk akal pada versi todays bootstrap dan jQuery. Terima kasih.
Enkripsi
3
Terima kasih! Pertanyaan ini memiliki lebih dari 140 ribu tampilan dan saya tidak mengerti mengapa bootstrap tidak dapat memperbaikinya. oh well, tepuk tangan.
Chad
58

Saya mulai bekerja dengan memberikan nilai indeks-z tinggi ke jendela modal SETELAH membukanya. Misalnya:

$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");
Andrew Dyster
sumber
Apakah ini berhasil (pria itu berkata begitu), mengapa Anda tidak memilih? Saat saya melihat tampaknya itu akan terjadi.
Rolice
Ya, adakah yang bisa menjelaskan mengapa ini jawaban yang buruk? Apakah ini hanya semacam peretasan?
Brandones
6
Saya tidak mengerti suara turun. Ya, ini merupakan peretasan tetapi solusi lain tidak bekerja untuk saya, jadi saya pikir saya akan menyumbang ini kepada orang-orang yang tidak keberatan menggunakan solusi "peretasan" untuk membuat benda itu bekerja.
Andrew Dyster
Ini adalah wawasan yang relevan dengan masalah khusus saya yang menempatkan modal pada elemen layar penuh. +1
Jack Stone
3
Ini adalah jawaban yang buruk karena ini adalah peretasan dan tidak berusaha menunjukkan ini. Jawaban lain mengatakan, "jika tidak ada yang berhasil, Anda bisa ...". Kenyataannya adalah bahwa modal tersebut sangat banyak digunakan di seluruh web dan harus berfungsi jika diterapkan dengan benar. Jawaban peretasan tidak membantu orang untuk mengetahui cara melakukan sesuatu dengan cara yang benar.
Lukos
35

Solusi yang disediakan oleh @Muhd adalah cara terbaik untuk melakukannya. Tetapi jika Anda terjebak dalam situasi di mana perubahan struktur halaman bukanlah suatu pilihan, gunakan trik ini:

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

Trik di sini adalah data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);" dengan menghapus latar belakang default dan membuat yang dummy dengan mengatur warna latar belakang dialog itu sendiri dengan beberapa alpha.

Pembaruan 1: Seperti yang ditunjukkan oleh @Gustyn bahwa mengklik pada latar belakang tidak menutup dialog seperti yang diharapkan. Jadi untuk mencapai itu Anda harus menambahkan beberapa kode skrip java. Berikut adalah beberapa contoh bagaimana Anda dapat mencapai ini. 

$('.modal').click(function(event){
    $(event.target).modal('hide');
});
Krishnendu
sumber
Ini berfungsi kecuali bahwa mengklik pada latar belakang tidak menutup dialog seperti yang diharapkan.
Gustyn
Krishnendu kamu adalah pahlawan saya. Saya datang untuk bekerja dengan malapetaka dan kesuraman dalam pikiran. 3 hari sebelum presentasi terakhir saya untuk menghadapi masalah ini tiba-tiba adalah keberanian untuk sedikitnya. Hai, teman saya pantas mendapat 100000 upvotes, sayangnya, hanya dapat memberi Anda satu :) selamat menikmati hari yang indah.
DotNetBeginner
Ketika saya mencoba ini, itu tidak mencakup latar belakang penuh halaman - hanya elemen div bahwa modal dideklarasikan.
Will Sam
Bekerja dengan sempurna. Terima kasih!
gfernandes
Bekerja dengan sempurna. Terima kasih!
Mayank Pandeyz
16

A tetapi terlambat dalam hal ini tetapi di sini adalah solusi generik -

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

Kunjungi tautan ini - Bootstrap 3 - modal menghilang di bawah latar belakang saat menggunakan bilah sisi tetap untuk detail.

Rohan
sumber
Ini adalah solusi sempurna untuk plugin Wordpress yang saya buat di mana saya tidak bisa mengontrol elemen induk pada tema orang lain.
Mark Rummel
Solusi terbaik sejauh ini!
digz6666
10

Cara lain untuk mendekati ini adalah dengan menghapus z-index dari .modal-backdropdalam bootstrap.css. Ini akan menyebabkan latar belakang berada pada level yang sama dengan bagian tubuh Anda yang lain (masih akan pudar) dan modal Anda berada di atas.

.modal-backdrop terlihat seperti ini

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

Cukup tambahkan dua baris CSS:

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

The .modal-backdrop harus memiliki nilai 1050 untuk mengaturnya di atas navbar.

Wahyu Primadi
sumber
Bagus, tetapi jika wadah modals position: fixedini tidak akan berfungsi.
CPHPython
10

Ini akan mencakup semua modals tanpa mengacaukan salah satu animasi atau perilaku yang diharapkan .. 

$(document).on('show.bs.modal', '.modal', function () {
  $(this).appendTo('body');
});
Cam Tullos
sumber
1
solusi global. namun lebih baik untuk menemukan masalahnya.
Milad Abooali
Saya pikir ini bukan solusi yang bagus, bagaimana dengan halaman dengan banyak modals? Bisa jadi berantakan.
Glen
Bisakah Anda jelaskan bagaimana itu akan berantakan? Semua yang dilakukannya adalah memindahkan modal dari tempat saat ini berada di DOM ke akhir tag tubuh. Itu tidak menciptakan apa pun yang belum ada di sana, hanya memindahkannya dan secara otomatis memberinya indeks-z atas.
Cam Tullos
Solusi terbaik menurut saya. tidak perlu mengedit css apa pun dan mengubah tampilan modal
Moslem7026
8

Saya hanya mengatur:

#myModal {
    z-index: 1500;
}

dan itu berhasil ....

Untuk pertanyaan awal: 

.my-module {
    z-index: 1500;
}
AmintaCode
sumber
Masalah saya adalah indeks-z juga.
James Lock
8

Gunakan ini di modal Anda: 

data-backdrop="false"
Jonathan
sumber
8

Masalah ini sering dapat dialami ketika menggunakan hal-hal seperti gradien di CSS untuk hal-hal seperti latar belakang atau bahkan header akordeon.

Sayangnya, memodifikasi atau mengesampingkan inti Bootstrap CSS tidak diinginkan, dan dapat menyebabkan efek samping yang tidak diinginkan. Pendekatan yang paling tidak mengganggu adalah menambahkan data-backdrop="false"tetapi Anda mungkin memperhatikan bahwa efek fade tidak lagi berfungsi seperti yang diharapkan.

Setelah mengikuti rilis terbaru dari Bootstrap, versi 3.3.5 tampaknya menyelesaikan masalah ini tanpa efek samping yang tidak diinginkan.

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

Pastikan untuk memasukkan file CSS dan file JavaScript dari 3.3.5.

Richard Nalezynski
sumber
6

Hai Saya punya masalah yang sama maka saya menyadari bahwa ketika Anda menggunakan bootsrap 3.1 Tidak seperti di bootsrap versi lama (2.3.2) struktur html dari modal telah diubah!

Anda harus membungkus tubuh header dan footer modal Anda dengan modal-dialog dan modal-konten 

<div class="modal hide fade">

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

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

    </div>
  </div>

 </div>
taliboni
sumber
+1 pastikan Anda menggunakan versi bootstrap.css dan bootstrap.js yang kompatibel dan bahwa markup Anda cocok dengan versi yang Anda gunakan.
srayner
Ya inilah kesimpulan saya dan saya menulisnya di sini hanya jika ada yang memiliki masalah ini.
talsibony
Yesus Kristus, jawaban ini terkubur dalam-dalam. Kasing yang sama untuk Bootstrap 4.
Randell
6

tidak ada solusi yang disarankan di atas bekerja untuk saya tetapi teknik ini menyelesaikan masalah:

$('#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);
});
Iqbal Javed
sumber
Saya lebih suka cara ini karena saya kehilangan format CSS dengan metode lain.
Eugene van der Merwe
6

Saya punya masalah ini dan cara termudah untuk memperbaikinya adalah addind z-index lebih besar dari 1040 pada modal-dialog div:

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

Saya percaya bootstrap membuat div modal-backdrop fade di mana dalam kasus saya memiliki indeks-z 1040, jadi jika Anda menempatkan modal-dialog di atas ini, seharusnya tidak menjadi abu-abu lagi.

Chris Rosete
sumber
6

Saya punya solusi yang lebih ringan dan lebih baik ..

Itu bisa dengan mudah diselesaikan melalui beberapa gaya CSS tambahan ..

  1. sembunyikan kelas .modal-backdrop(dihasilkan secara otomatis dari Bootstrap.js)

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

  2. mengatur latar belakang .modalke gambar latar belakang hitam transparan.

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

Ini akan bekerja paling baik jika Anda memiliki persyaratan yang memerlukan modal untuk berada di dalam elemen dan tidak di dekat </body>tag.

JM Tee
sumber
Anda menyelamatkan hari saya ... Ini adalah alternatif yang bagus!
notme
@xunga, jangan khawatir. tolong bagikan solusi ini kepada orang lain :)
JM Tee
Anda dapat melihat hasil edit di sini ... stackoverflow.com/posts/42887253/revisi
notme
Terima kasih JM, solusi Anda adalah satu-satunya yang bekerja untuk saya.
Ahmed J.
5

atur z-index .modal ke nilai tertinggi

Misalnya, .sidebarwrapper memiliki z-index 1100, jadi atur z-index .modal ke 1101

.modal {
    z-index: 1101;
}
A Mohudum Kamil
sumber
5

Dalam kasus saya menyelesaikannya, tambahkan ini di stylesheet saya:

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

dengan google debugger, dapat memeriksa elemen BACKDROP Dan memodifikasi atribut. Keberuntungan goog.

Ckevyn Ovalle
sumber
3

dalam navbar-fixed-topkebutuhan navbar Anda z-index = 1041 dan juga jika Anda menggunakan bootstarp-combined.min.cssperubahan juga .navbar-fixed-top, .navbar-fixed-bottom z-index to 1041

Mohsin
sumber
3

Ubah posisi absolut menjadi relatif.

.modal-backdrop {
    position: relative;
    /* ... */
}
Aristeu Roriz
sumber
1
menghapus latar belakang hitam
HCarrasko
3

Anda juga dapat menghapus indeks-z dari .modal-backdrop. Css yang dihasilkan akan terlihat seperti ini.

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

Saya menghapus latar belakang modal.

.modal-backdrop {
    display:none;
}

Ini bukan solusi yang lebih baik, tetapi bekerja untuk saya.

Kode Singkat
sumber
3

yang saya temukan adalah:

di bootstrap 3.3.0 itu tidak benar, tetapi ketika di bootstrap 3.3.5 itu right.let lihat kode 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)
ttong
sumber
3

Tambahkan yang ini ke halaman Anda. Ini bekerja untuk saya.

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

Saya memperbaikinya dengan menambahkan gaya di bawah ini ke tag DIV

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

Dan tambahkan custom css

.modal-backdrop {position: relative;}
RaymondLe
sumber
3 
$('.modal').insertAfter($('body'));
pengguna109764
sumber
3

Bagi saya solusi termudah adalah memasukkan modal saya ke dalam pembungkus dengan posisi absolut dan indeks-z lebih tinggi dari .modal-backdrop. Karena modal-backdrop (setidaknya dalam kasus saya) memiliki z-index 1050:

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

sivi911
sumber
indeks-z bekerja untuk saya. Terima kasih banyak.
Asif Iqbal
2

Dalam kasus saya, saya memiliki bungkus dengan yang berikut:

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

Hanya menghapus z-index: 1 dan tidak tahu mengapa memperbaiki masalah. juga pasti menghapus posisi relatif lakukan tetapi saya membutuhkannya.

hsobhy
sumber