Önyükleme modu: geçişte arka plan en üste atlar

111

Modelle ilgili bir sorunum var. Bir sayfada, modal'ı değiştiren bir düğme var. Modal göründüğünde, sayfa en üste atlar.

Bir çözüm bulmak için elimden gelen her şeyi yaptım / vs, ama gerçekten kayboldum.

DÜZENLE:

Ben de denedim: $('#myModal').modal('show');ama aynı etkiye sahip.

javascript  jquery  css  twitter-bootstrap  twitter-bootstrap-3 
— filanca
kaynak
Merhaba Benni. Evet, meydan okurcasına öyleyim. Ben de denedim: $ ('# myModal']. Modal ('show'); ama aynı etkiye sahip.
— FooBar
1
can bu yardım edeceğiz, aynı sorunu: stackoverflow.com/questions/12894570/...
— Mark
@Mark, Aşağıdaki cevabımı görün ...
— Ravimallya
Fark ettim ki herhangi bir yere tıklarsam windowmodal ateşleniyor. Bu beklenmedik bir garip görünüyor. Ben kaldırıldı buttonDevTools'un yoluyla ve sayfadaki tıklayarak yerde hala kalıcı pencere açtı. Bu istenen davranış mıydı? Modal tıklama olayı için doğru seçiciye sahip olup olmadığınızı merak ediyorum.
— 2014

Yanıtlar:

174

Modal açıldığında modal-open, <body>etikete bir sınıf ayarlanır . Bu sınıf overflow: hidden;bedene göre belirlenir. Bootstrap.css stilini geçersiz kılmak için bu kuralı stil sayfanıza ekleyin:

body.modal-open {
    overflow: visible;
}

Şimdi parşömen yerinde kalmalıdır.

— pstenstrm
kaynak
@pstenstrm, bir şüphem var. .modal-open sınıfı için css'yi geçersiz kılmanızı söylediniz. Peki ya fazladan kapanış div'leri varsa ve cevabımda, çözümümdeki herhangi bir sınıfı geçersiz kılmadıysam? Fazladan 2 div kaldırıldıktan sonra sorunsuz çalışıyor. bs modal ekleyerek .modal-backdrop div fazladan kapanış etiketleri nedeniyle kapatılması gereken yerde karışır.
— Ravimallya
4
Benim için çalışmıyor, bir iframe içinde modal var ve yukarı kaydırılıyor ... herhangi bir fikir?
— Cabuxa.Mapache
5
Bu benim için düzeltti. Sorunumun kökenini eklemek için 'body {boy: 100%}' idi.
— PeteG
23
Benim için çalışmıyor. Açtığım bir vanilya modelim var .modal('show')ve hala sayfanın en üstüne kayıyor. Bootstrap v3.2.0
— MandM
6
position: inheritBu sınıfa eklemek zorunda kaldım ama ondan sonra bir sihir gibi çalıştım.
— adrian3martin
28

Eğer modal etiketli arıyorsanız. Href özniteliğinden "#" karakterini kaldırmayı ve veri öznitelikleriyle modal çağırmayı deneyin.

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
— Gökhan
kaynak
Aynen oraya gönderdiğiniz gibi açıyorum. Bağlantıya göz atın
— FooBar
5
"<düğme>" yi kullanmazsanız ancak <a>, benim durumumda olduğu gibi, fare imlecini nesne üzerinde hareket ettirdiğinizde "parmak düğmesi" simgesini kaybedersiniz. Bunun üstesinden gelmek için bunu yaptım: ... href = "# mai_modal_id" data-toggle = "modal" ... ve data-target kullanmadım
— pagurix
3
@pagurix - Yorumunuz senaryom için en iyi sonucu verdi.
— AlfredBr
Bence @ pagurix yorumunu ayrı bir cevap olarak yazmalı. Yardımcı olan tek şey. Başparmak havaya!
— Vibhor Dube
14

bağlantı etiketi olarak kullanıyorsanız <a href"#" ..> ... </a>ve href="#"sorun yaratıyorsa, bunu kaldırın. Daha okuyabileceğiniz burada

— Nimesh Jain
kaynak
12 
$('the thing you click on').click(function ($e) {
            $e.preventDefault();
});

Bu, kaydırma çubuğunun en üstte olmasını durdurmanıza yardımcı olacaktır.

— Georgi Mirchev
kaynak
6

Muhtemelen kodda bir yere yerleştirilmiş modlarla çalışmak:

body.modal-open {
    overflow: visible;
    position: absolute;
    width: 100%;
    height:100%;
}

Benim için konum, yükseklik ve taşmanın bir kombinasyonuydu.

— Dennis Heiden
kaynak
4

Belirli bir hata görmüyorum, ancak html sözdiziminizi kontrol etmenizi tavsiye ederim .

Kaynağınızla küçük bir test bana şu hatalar veriyor

Satır 127, Sütun 34: Kapatılmamış öğe div.

              <div class="inner onlySides">

Bu bir sorun olabilir.

— billyJoe
kaynak
Teşekkür ederim - bununla ilgileneceğim - bunun yaşadığım sorunu tetikleyebileceğine inanmakta zorlansam da. Bunu izlemek için bir eklenti kullanıyormuşsunuz gibi görünüyor - öyleyse; hangi?
— FooBar
firebug dışında eklenti kullanmıyorum. Validator.w3.org adresinde sayfanızın geçerliliğini kontrol etmek her zaman iyi bir şeydir . Bu bir sorun olurdu çünkü kapatılmamış
— div'iniz
4

Atlama arka planını çözmenin en kolay yolu iki parametre tanımlamaktır:

body.modal-open {
  overflow: visible;
  padding-right: 0 !important;
}
— Nils
kaynak
3

Bu sorunu yerel ana makinemde kopyalamaya çalıştım ve göründüğü kadar tuhaf, kullandığınız Bootstrap JS dosyasıyla bir çakışma var.

Şu kodu yorumlamayı deneyin:

<script src="/min/?f=bootstrap.min.js,modernizr.js,bootstrap-datetimepicker.js,nprogress.js,feedback.js,select2.min.js,jquery.unveil.js,equalheights.jquery.js,hogan-v2.0.0.min.edu-custom.js,jquery.visible.min.js,handlebars-v1.2.0.js,typeahead.bundle.min.js,jquery.gridster.js,cookie.jquery.js,jquery.autosize.min.js,application.js&ver=1392814384"></script>

Bunun yerine Bootstrap 2.3.2'yi kullanın:

<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

Bu benim için çalışmasını sağladı.

Bootstrap sürüm 3 ile denedim ama işe yaramadı. Hala sorun kısmını tam olarak belirleyemiyorum, ancak Firebug boyunca bir yerde bana bir e.preventDefault() is not a functionhata attı - bunun temel neden olduğunu tahmin ediyorum, ancak henüz bunu diğer JS dosyalarıyla karşılaştırmadım.

— AYB
kaynak
3

.Modal üst kısmını ekranın ortasına yerleştirmeye çalıştım. 

.modal {
    position: absolute;
    top: 50%;
}

Sadece benim 2 sentlik düşüncelerim.

— Holger Thiebosch
kaynak
Yeterince yakın. Olumsuz oy vermeyeceğim çünkü sorunum başka bir yerde olabilir, ancak bu ekranın alt yarısının karartılmasına neden oldu, ancak model ortaya doğru konumlandırıldı.
— crafter
3

Bootstrap 3.1.1'de şu çözümle çözdüm:

body.modal-open {
    position: absolute !important;
}
— Filo
kaynak
2
Günümü kurtardın @Filo Çok teşekkür ederim
— vinothini
2

divdiv'den hemen önce <div id="footer">veya sonra fazladan 2 kapanış etiketiniz var <div id="mainFrame" class="group">. Bunu incelemek için Visual Studio 2012 express'i kullanıyorum.

Lütfen bu 2 ekstra div'i kaldırın ve nasıl çalıştığını bize bildirin. Ekstra div'leri ve tüm özel komut dosyalarını kaldırdım. altbilgide yalnızca jquery çekirdeği ve önyükleme tutuldu. işte son çıktının ekran görüntüsü. işte sizin için iyi çalışan jsbin oyun alanı.

Headjs kullanmanızı öneririmTüm komut dosyalarını ve css dosyalarını yüklemek . ayrıca herhangi bir komut dosyasını iki kez yüklemek için iyi bir uygulama değildir.

görüntü açıklamasını buraya girin

— Ravimallya
kaynak
4
Olumsuz oy verilen cevaplar, gerekçeli uygun yorumlara ihtiyaç duyar.
— Ravimallya
2

Modal'ı açmak ve ne olacağını görmek için bunu kullanmayı deneyin:

<a href="#generalModal" class="btn btn-primary btn-lg" data-toggle="modal">
  Launch demo modal 
</a>
— scooterlord
kaynak
2 
body.modal-open {
overflow: visible !important;
}

Düzeltmek için önemli özelliğe ihtiyacım vardı

— Dizzle
kaynak
Bu benim için çalıştı ve pstenstrm'in cevabından @ MandM'nin sorunu (yorumlarda) vardı: "Benim için çalışmıyor. .Modal ('göster') ile açtığım bir vanilya modal var ve hala kayıyor sayfanın en üstüne. Bootstrap v3.2.0 ". Sahip olduğu tek garip etki, pencereden daha uzun bir modal kaydırmaya devam ederseniz, arka planın kaymasıdır, ancak bu benim için küçük bir sorun. Teşekkürler.
— dgig
1

Bootstrap 2.3.2 kullanırken aynı sorunu yaşadım

Bir bağlantıya tıklamak bir sorundu:

İşin püf noktası şuydu: yanlış dönüş;

<a href="#" class="btn" onclick="openPositionPopup(${positionReport[0]}); return false;">
     <i class="icon-map-marker"></i>
</a>

ve js:

function openModal() {
    $('#myModal').modal('show');
}
— mpccolorado
kaynak
1

Burada ve başka yerde her şeyi denemek için saatler harcadım. Angularjs-material kullanımı için, uibModal.open yapılandırma nesnesi arg üzerinde animasyonu devre dışı bırakmam gerekti.

Örneğin:

  $uibModal.open(
    {
      animation: false,
      component: 'myDialogComponent',
      size: 'lg',
      resolve: {
        details: function() {
          return detailsCollection;
        }
      }
    }
  );

Umarım bu başka birine yardımcı olur.

— Nathan Plajı
kaynak
1

Bu sorunla bir Angular programında karşılaşıyorsanız, aşağıdaki kodu .scss dosyasının ilk satırına ekleyin.

::ng-deep {   
     body.modal-open {
          overflow: visible !important;
          position: absolute !important;   
     } 
}
— Sibashankar panda
kaynak
0

Aynı sorunu yaşadım ve sanırım çözdüm. Modal HTML'yi body etiketinin doğrudan alt öğesi olarak yerleştirmeniz yeterlidir ! Gerçi, ihtiyaç duyduğunuz her yere modal'ı tetikleyen düğme için HTML kodunu yerleştirebilirsiniz. Bunun CSS kalıtımını ve bu sorunu tetikleyen konum sorunlarını ortadan kaldırdığına inanıyorum.

Misal:

<body>
    <!-- All your other HTML code -->
    <div>
        <!-- Button trigger modal -->
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
            Launch demo modal
        </button>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</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>
    </div>
</body>
— nunoarruda
kaynak
0

Sonunda bunu çözdüm. Bir bağlantı etiketindeki modeli hedefleyen düğmeyi SARMAYIN.

Kötü

<a href"#">
    <button type="button" class="btn"
data-toggle="modal" data-target="#myModal">See Detail</button>
</a>

İyi

<button type="button" class="btn"
    data-toggle="modal" data-target="#myModal">See Detail</button>
— ALFmachine
kaynak
0

Bu benim için yaptı

body.modal-open {
    overflow: inherit;
    padding-right: 0 !important;
}
— warkitty
kaynak
Modal açıldığında navbar ve konteyner atlama ile benzer bir sorun yaşıyordum. İşte aradığım buydu.
— Awhitey98
Yardımcı olduğuna sevindim!
— warkitty
0

Birkaç saat boyunca düzinelerce cevabı okuduktan sonra, orijinal kodu bootstrap dosyasından tekrar kopyaladım ve her zaman en üste atlamama neyin sebep olduğunu görmek için adım adım hata ayıkladım. Çünkü Bootstrap 3'ün gerçek en son sürümü, modu şu anda bulunduğunuz konumda gösteriyor. Bunu öğrendim -webkit-transform: translate3d(0,0,0);ve height: 100%css vücut etiketimde bu davranışa neden oldu. Belki bu birisine yardımcı olur.

— AlexioVay
kaynak
0

Ben ne zaman benim için çalışıyor değişti gelen sürüm 3.1.1 için 3.3.7

3.3.1 sürümünü kullanmanız gerekmiyorsa değiştirmeyi deneyin.

Değişiklikten sonra, işlevin geri kalanının doğru çalışıp çalışmadığını kontrol etmek iyidir .

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
— Pyot
kaynak
0

body.modal-open { position: inherit; }

Bu benim için bir büyü gibi çalıştı.

— Nimish goel
kaynak
0

Yukarıdaki örneklerin hepsini denedim - bu benim için işe yarayan tek şey:

.modal-open {

            padding-right: 0 !important;

        }

Dolgunun modelin sağ tarafından çıkarılması - atlamayı önler.

— Stnfordly
kaynak
0

yükseklik:% 100 sorunu çözmektir, ancak doğru "div" eklemelisiniz

— Anar Ali
kaynak
0

Aynı sorunu yaşadım ve hiçbir cevap bana yardımcı olmadı. Aptalca görünen bir geçici çözüm buldum ama en azından benim durumumda çalışıyor.

Sayfanın yalnızca bir kez yukarı kaydırıldığını ve bundan sonra bir sonraki açılan modların beklendiği gibi çalıştığını gördüm. Ardından, DOM'daki herhangi bir öğenin gizlenmesinin aynı garip kaydırmayı başlattığını buldum. Bu yüzden, sayfa yüklendikten sonra onu gizlemek ve kaldırmak yerine sahte bir div oluşturdum ve bu sorunu çözdü.

var $dummy= $("<div>");
$("body").append($dummy);
$dummy.hide().remove();
— Borzilo Andrey
kaynak
0

Ben de aynı sorunla karşı karşıyaydım. Sorun, html ve body öğelerine .modal-open sınıfını ekliyordum. Sadece bu sınıfı vücuda ekleyin ve her şey beklendiği gibi çalışır.

— general666
kaynak
-1

Bunu deneyin, mükemmel çalışıyor

/* fix body.modal-open overflow:hidden */
body.modal-open {
    height: auto;
}
— minimit
kaynak
-3

Pstenstrm'in cevabı sizin için işe yaramazsa, onu şu HTML değiştirme düğmesi ile birleştirmeyi deneyin:

<a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#generalModal" id="launchbutton" href="#launchbutton"> Launch demo modal </a>

Bu, düğmeyi ekranda tutmalıdır.

— Ben
kaynak
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.