Arka plan altında görünen Bootstrap kalıcı


576

Kodumu doğrudan Bootstrap örneğinden kullandım ve sadece bootstrap.js'yi (ve bootstrap-modal.js'yi değil) dahil ettim. Bununla birlikte, modelim gri solgunluk (zemin) altında görünüyor ve düzenlenemez.

İşte böyle görünüyor:

kalıcı arkasına saklanarak modal

Bu sorunu yeniden oluşturmanın bir yolu için bu kemana bakın . Bu kodun temel yapısı şöyledir:

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

Bunun neden olduğu veya bunu düzeltmek için ne yapabileceğime dair bir fikrin var mı?


Başka birinin açık etiketler vb. İçin biraz zaman araması durumunda, bunun neden olduğunu anlamaya çalışırken, benim için modals'ımı kıran Feedly krom uzantısıydı. Uzantı devre dışı bırakıldığında davranış normale döndü.
threeve

Sorunun iOS'ta olması ve modalın overflow-x: hiddenkabına uygulanmasından kaynaklanıyor olabilir .
idmean

1
3 versiyonda 3 örnek oluşturuldu. 3.3.1 iyi çalışıyor ve diğerleri çalışmıyor. Sürüm 3.3.1 jsfiddle Sürüm 3.3.5 jsfiddle Sürüm 3.3.6 jsfoddle
Dimitry

1
Bootstrap ekibi ile bir hata raporu oluşturulmuş gibi görünüyor bu gerçekten bir hata bile 3.3.1 iyi çalıştı düşündüm. Yayınladığım bağlantıdan daha fazla bilgi edinebilirsiniz.
Dimitry

Bu sorunla karşılaşan herkes için bir blog yazısı weblog.west-wind.com/posts/2016/Sep/14/…

Yanıtlar:


629

Kalıcı kap sabit ya da göreceli bir konuma sahipse ya da sabit ya da göreli konuma sahip bir eleman içindeyse bu davranış ortaya çıkar.

Kalıcı kabın ve tüm üst öğelerinin, sorunu çözmek için varsayılan yol olarak konumlandırıldığından emin olun.

İşte bunu yapmanın birkaç yolu:

  1. En kolay yol, modal div'i özel konumlandırmaya sahip herhangi bir öğenin dışında tutmaktır. İyi bir yer, kapanış gövdesi etiketinden hemen önce olabilir </body>.
  2. Alternatif olarak, position:sorun ortadan kalkıncaya kadar CSS özelliklerini moddan ve atalarından kaldırabilirsiniz . Ancak bu, sayfanın görünüşünü ve işlevini değiştirebilir.

24
İyi yakalama. FYI, sadece "sabit" değil, ebeveynin "göreli" pozisyonu da bu soruna neden oluyor
Giang Nguyen

3
@Muhd ve tüm üst öğelerinin varsayılan şekilde konumlandırıldığından nasıl emin olursunuz?
indago

4
Birinci seçeneği tercih edin: "modal div'i özel konumlandırmaya sahip öğelerin dışında olacak şekilde hareket ettirin". Thx
MPGN

9
Bu cevabı anlamıyorum. Bootstrap örnekleri, "modal", "modal-fade" vb. Çizgisi boyunca birkaç sınıf içeren bir modal div gösterir.. Modal içinde pozisyon: sabit ve "modal-gövde" içinde pozisyon: göreceli olarak ayarlanır. Peki modal kabını hareket ettirmek, modal pozisyonu sabit olduğunda nasıl bir şey değiştirecek?
Carlos

4
Hala bu problemi yaşıyorum. Daha önce ekliyorum </body>ve bodyherhangi bir positionstil özelliği yok . Başka bir fikrin var mı?
Tuan Anh Tran

383

Sorun, ana kapların konumlandırılmasıyla ilgilidir. Göstermeden önce kipinizi bu kaplardan kolayca "taşıyabilirsiniz". Eğer showjs kullanarak modal ing eğer olsaydı :

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

Ya da, düğmeleri kullanarak modal'ı başlatırsanız, şunu bırakın .modal('show');:

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

Bu, tüm normal işlevleri koruyacak ve bir düğmeyi kullanarak modu gösterebilmenizi sağlayacaktır.


12
@Leandrotk çözümünün bir sayfada sahip olabileceğiniz tüm modals için çalışmasını sağlamak için bu genel olay işleyiciyi kullanın $('.modal-dialog').parent().on('show.bs.modal', function(e){ $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
Patrick M.

2
@PatrickM. İnanılmaz! devraldığım eski bir projede bir cazibe gibi çalıştı ve her yerde modals vardı!
denislexic

5
CSS konumlandırmasını gerçekten düzeltemediğinizde bu harika çalışır. Teşekkürler :)
alexcasalboni

Bunu yaptığımda tüm CSS formatlarını kaybetmemizin bir nedeni var mı? Ve kolay bir düzeltme? :-)
Eugene van der Merwe

1
Leandrotk yanıtından, #myModal işlevini şu şekilde görünmesi için .modal olarak değiştirin: $ ('. Modal'). AppendTo ("body"). Bu, varsayılan bir sınıf modalına sahip oldukları için tüm modals ile çalışacaktır.
Ngatia Frankline

170

Yukarıda verilen tüm seçenekleri denedim ama bunları kullanarak işe alamadım.

Ne işe yaradı: .modal fonun z-endeksini -1 olarak ayarlamak.

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

10
Bu mükemmel çalıştı ve açık ara en kolay çözüm. Kullandımz-index: 0;
andrewcockerham

Ayrıca sadece bu seçeneklerin çalıştığını doğrulayabilir! Teşekkürler!
Ferry Kranenburg

Teşekkürler! Bu BS3'te bir hata mı?
13'te mauriblint

1
Birçok farklı z endeksi olan bir tema kullanıyorsanız bu işe yaramaz. Örneğin, zeminin sayfadaki paneller gibi diğer öğelerin arkasında-1 görünmesine neden olacak şekilde ayarlanması . Ancak bunu kalıcı mod dışında her şeyin üstünde yapmak için ayarlayın. 3
Justin Skiles

1
Bunu, yukarıda daha yüksek puan alan cevaplardaki önerileri tükettikten sonra da en hızlı yöntem olarak buldum. Benim durumumda modal-dialog sınıfıyla div'ı 1060'lık bir z-endeksine ayarlamak bindirmenin önüne attı. Navbar'ı kullanırsanız, mod kalıbını bindirmenin üstüne taşımak isteyeceksiniz, aksi halde navbarınız bindirmenin üstüne çıkabilir ... kaos insues ...
Mike Devenney

152

Ayrıca, BootStrap css ve js sürümlerinin aynı olduğundan emin olun. Farklı versiyonlar da modun arka plan altında görünmesini sağlayabilir:

Örneğin:

Kötü:

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

İyi:

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

Benim için de buydu. Teşekkürler!
PedroTanaka

Sadece aynı sorunu vardı, aynı sürüm stil sayfası çözümü herkese yardımcı olmuş gibi görünüyor! Teşekkürler
HGB

Teşekkür ederim, bu benim tam
sorunumdu

Malcor hiç sorun değil, ben bu hatayı anladım çok zaman geçirdim. Gördüğümüz gibi, '14'te, şimdi '16'da, böcek hala var. Aslında bu bir hata değil, ama bootstrap yazarlar bunu kendi belgelerine veya bir şey eklemek gerekir ..
Sid

Burada aynı anlaşma, biz SASS oluşturmak için değişti ve tamamen js dosyasını kendisi unuttum .. Bu en iyi cevap olmalı .. Modal her zaman varsayılan olarak vücut yakın etiketi hemen önce dahil olduğu gibi ...
Angry 84

116

Ben de bu sorunla karşılaştım ve ben aslında bir zemin gerekmez anladım kadar çözümler hiçbiri benim için çalıştı. Zemin kodunu aşağıdaki fonla kolayca kaldırabilirsiniz.

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

Not : data-backdropözelliğin false( diğer seçenekler : staticveya true) olarak ayarlanması gerekir .


2
Şimdiye kadar en kolay çözüm ve bir cazibe gibi çalışıyor!
learning_to_swim

Parlak! Ayrıca bootstrap'a ihtiyacım vardı - diğer tüm Bootstrap işlevlerimin neden iyi çalıştığından emin değilim ama modal çalışması yapmam gerekiyordu.
steve klein

Mükemmel !!! Bir günlüğüne mücadele ettim .. ve başka bir günümü kurtardın. Tekrar teşekkürler .. +1 ve şerefe
Bhaskara

1
Tüm çözümleri dikkatlice okuduktan sonra, bootstrap ve jQuery'nin bugünkü sürümünden en mantıklı olanı buldum. Teşekkür ederim.
Şifreleme

3
Teşekkür ederim! Bu soru 140k üzerinde görüşlere sahiptir ve bootstrap'ın bunu neden çözemediğini anlamıyorum. Ah, şerefe.
Chad

58

Açıldıktan sonra kalıcı pencereye yüksek bir z-endeksi değeri vererek çalışmayı başardım . Örneğin:

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

Çalışıyor mu (adam öyle diyor), neden oy kullanıyorsunuz? Baktığım gibi olacak.
Mart'ta Rolice

Evet, kimse bunun neden kötü bir cevap olduğunu açıklayabilir mi? Sadece kibirli mi?
brandones

6
Aşağı oyları anlamıyorum. Evet, hacky ama diğer çözümler benim için işe yaramadı, bu yüzden sadece lanet şeyi işe almak için "hacky" çözümleri kullanmayı umursamayan insanlara katkıda bulunacağımı düşündüm.
Andrew Dyster

Bu, benim tam sorunumun üzerine bir model koymakla ilgili özel sorunumla ilgili bir kavrayıştı. +1
Jack Stone

3
Kötü bir cevaptır çünkü bir hack'tir ve bunu belirtmek için herhangi bir girişimde bulunmaz. Diğer cevaplar "Başka hiçbir şey işe yaramazsa ..." der. Gerçek şu ki, model web'de çok yaygın olarak kullanılmaktadır ve doğru şekilde uygulandığında çalışması gerekir. Hacky cevapları, insanların işleri nasıl doğru şekilde yapacağını anlamalarına yardımcı olmaz.
Lukos

35

@Muhd tarafından sağlanan çözüm bunu yapmanın en iyi yoludur. Ancak sayfanın yapısını değiştirmenin bir seçenek olmadığı bir durumda sıkışırsanız, bu hileyi kullanın:

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

Buradaki hile data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);" , varsayılan fonu kaldırarak ve iletişim kutusunun arka plan rengini bir alfa ile ayarlayarak kukla bir zemin oluşturmaktır.

Güncelleme 1: @Gustyn'in işaret ettiği gibi, arka plana tıklamak iletişim kutusunu beklendiği gibi kapatmaz. Yani bunu başarmak için bazı java komut kodu eklemeniz gerekir. İşte bunu nasıl başarabileceğinize dair bir örnek.

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

Bu, arka plana tıklamanın iletişim kutusunu beklendiği gibi kapatmaması dışında çalışır.
Gustyn

Krishnendu sen benim kahramanımsın. Kıyamet ve kasvet düşünerek çalışmaya geldim. Son sunumumdan 3 gün önce bu sorunla karşı karşıya kalmak aniden sinir bozucu oldu. U arkadaşım hak 100000 upvotes alas sadece u verebilir :) müthiş mübarek bir gün var.
DotNetBeginner

Bunu denediğimde, sayfanın tam arka planını kapsamıyor - sadece modelin bildirildiği div öğesi.
Sam

Mükemmel çalıştı. Teşekkür ederim!
gfernandes

Mükemmel çalıştı. Teşekkür ederim!
Mayank Pandeyz

16

A ama bu konuda geç ama burada genel bir çözüm -

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

Ayrıntılar için sabit bir kenar çubuğu kullanılırken bu bağlantıyı ziyaret edin - Bootstrap 3 - modal arka planın altında kayboluyor .


Bu, başkalarının temalarındaki ana öğeleri kontrol edemediğim bir Wordpress eklentisi için mükemmel bir çözümdü.
Mark Rummel

Şimdiye kadarki en iyi çözüm!
digz6666

10

Buna yaklaşmanın başka bir yolu .modal-backdrop, bootstrap.css dosyasındaki z dizinini kaldırmaktır . Bu, zeminin vücudunuzun geri kalanı ile aynı seviyede olmasına (yine de solmaya) ve modalınızın üstte olmasına neden olacaktır.

.modal-backdrop buna benzer

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

10

Sadece iki satır CSS ekleyin:

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

.Modal-zemin, navbar üzerinde ayarlamak için 1050 değerine sahip olmalıdır.


Güzel, ama modals konteyner varsa position: fixedbu işe yaramaz.
CPHPython

10

Bu, herhangi bir animasyonu veya beklenen davranışı bozmadan tüm modelleri kapsar.

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

1
küresel çözüm. ancak sorunu bulmak daha iyidir.
Milad Abooali

Harika bir çözüm olduğunu düşünmüyorum, çok fazla moda içeren sayfalar ne olacak? Dağınık olabilir.
Glen

Nasıl dağınık olacağını açıklayabilir misiniz? Tek yaptığı, modal'ı şu anda DOM'da bulunduğu yerden gövde etiketinin sonuna taşımaktır. Zaten orada olmayan bir şey yaratmıyor, sadece hareket ettiriyor ve otomatik olarak en iyi z-endeksini veriyor.
Cam Tullos

En iyi çözüm bence. herhangi bir css düzenlemeye ve kalıcı görünümü değiştirmeye gerek yok
Moslem7026

8

Basitçe ayarladım:

#myModal {
    z-index: 1500;
}

ve çalışıyor....

Orijinal soru için:

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

Benim sorunum da z-endeksiydi.
James Lock


8

Bu sorun, arka plan veya akordeon başlıkları gibi şeyler için CSS'deki degradeler gibi şeyler kullanıldığında sıklıkla karşılaşılabilir.

Ne yazık ki, çekirdek Bootstrap CSS'yi değiştirmek veya geçersiz kılmak istenmeyen bir durumdur ve istenmeyen yan etkilere neden olabilir. En az müdahaleci yaklaşım eklemektir, data-backdrop="false"ancak solma etkisinin artık beklendiği gibi çalışmadığını fark edebilirsiniz.

Bootstrap'ın son sürümlerini izledikten sonra, sürüm 3.3.5, istenmeyen yan etkileri olmadan bu sorunu çözüyor gibi görünüyor.

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

3.3.5'ten itibaren CSS dosyalarını ve JavaScript dosyalarını eklediğinizden emin olun.


6

Merhaba ben aynı sorunu vardı sonra ben bootsrap 3.1 kullanırken bootsrap (2.3.2) eski sürümlerinde aksine modal html yapısının değiştiğini fark!

kalıcı başlık gövdesini ve altbilgisini kalıcı iletişim kutusu ve kalıcı içerikle sarmalısınız

<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 ve bootstrap.js'nin uyumlu sürümlerini kullandığınızdan ve işaretlemenizin kullandığınız sürümle eşleştiğinden emin olun.
srayner

Evet, bu benim sonucumdu ve burada sadece kimse bu sorunu varsa yazdım.
talsibony

Tanrım, bu cevap derinlere gömüldü. Bootstrap 4 için de aynı durum.
Randell

6

Yukarıdaki önerilen çözümlerin hiçbiri benim için çalışmadı, ancak bu teknik sorunu çözdü:

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

Bu yöntemi tercih ederim çünkü diğer yöntemlerle CSS biçimlendirmesini kaybettim.
Eugene van der Merwe

6

Bu sorunu vardı ve düzeltmek için en kolay yolu addind z-endeksi modal-iletişim div 1040 daha büyük oldu:

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

Bootstrap, benim durumumda z-endeksi 1040 olan bir div modal zemin solması oluşturduğuna inanıyorum, bu yüzden modal iletişim kutusunu bunun üstüne koyarsanız, artık gri olmamalıdır.


6

Daha hafif ve daha iyi bir çözümüm var ..

Bazı ek CSS stilleri ile kolayca çözülebilir.

  1. sınıfı gizle .modal-backdrop(Bootstrap.js'den otomatik olarak oluşturulur)

    .modal-backdrop
    {
    display:none;
    visibility:hidden; 
    position:relative
    }
  2. arka planını .modalsaydam siyah zemin görüntüsüne ayarlayın.

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

Bu, modun </body>etikete yakın değil, bir öğenin içinde olmasını gerektiren bir gereksiniminiz varsa en iyi şekilde çalışır .


Günümü kurtardın ... Bu güzel bir alternatif!
notme

@xunga, endişelenme. Lütfen bu çözümü diğer insanlarla paylaşın :)
JM Tee

düzenlemeleri buradan görebilirsiniz ... stackoverflow.com/posts/42887253/revisions
notme

Teşekkürler JM, çözümünüz benim için çalışan tek çözümdü.
Ahmed J.

5

z-endeksi .modal değerini en yüksek değere ayarla

Örneğin, .sidebarwrapper 1100'lük z dizinine sahiptir, bu nedenle .modal'ın z dizinini 1101 olarak ayarlayın

.modal {
    z-index: 1101;
}

5

Benim durumumda bunu çöz, bunu stil sayfama ekle:

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

google hata ayıklayıcı ile, BACKDROP öğesini inceleyebilir ve nitelikleri değiştirebilir. İyi şanslar.


3

navbar navbar-fixed-topihtiyaç z-index = 1041 ve ayrıca u kullanmak bootstarp-combined.min.cssda değiştirmek .navbar-fixed-top, .navbar-fixed-bottom z-index to 1041


3

Mutlak konumu göreli olarak değiştirin.

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

1
siyah arka plan kaldırır
HCarrasko

3

Ayrıca z-dizinini .modal-backdrop öğesinden de kaldırabilirsiniz. Ortaya çıkan css şöyle görünecektir.

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

3

Kalıcı zemini kaldırdım.

.modal-backdrop {
    display:none;
}

Bu daha iyi bir çözüm değil, ama benim için çalışıyor.


3

ne bulmak olduğunu:

Bootstrap 3.3.0'da doğru değil, ancak bootstrap 3.3.5'te doğru. kodu görelim. 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

Bunu sayfalarınıza ekleyin. Benim için çalışıyor.

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

3

DIV etiketine aşağıdaki stili ekleyerek bunu düzelttim

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

Ve özel css ekleyin

.modal-backdrop {position: relative;}


3

Benim için en kolay çözüm modalımı mutlak pozisyona ve z-endeksine .modal fondan daha yüksek bir sargıya koymaktı. Kalıcı zeminde (en azından benim durumumda) z-endeksi 1050 bulunduğundan:

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


z-endeksi benim için çalıştı. Çok teşekkürler.
Asif Iqbal

2

Benim durumumda, aşağıdakileri içeren bir sarıcı vardı:

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

Sadece z-endeksi: 1 kaldırıldı ve sorunu neden çözdüğüne dair hiçbir fikrim yok. Ayrıca göreceli pozisyonun kaldırılması da kesinti ama buna ihtiyacım vardı.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.