Bootstrap Modal hemen kayboluyor

Bootstrap kullanan bir web sitesinde çalışıyorum.

Temel olarak, ana sayfada, Kahraman Birimi'ndeki düğmeyle çağrılan bir yöntem kullanmak istedim.

Düğme kodu:

<button type="button" 
    class="btn btn-warning btn-large" 
    data-toggle="modal"
    data-target="#myModal">Open Modal</button>

Kalıcı kod:

<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">In Costruzione</h3>
  </div>
  <div class="modal-body">
    <p>Test Modal: Bootstrap</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Chiudi</button>
    <button class="btn btn-warning">Salva</button>
  </div>
</div>

Sorun, düğmeyi tıkladığımda, modun kaybolması ve hemen kaybolmasıdır.

Herhangi bir yardım için minnettar olurum.

Ayrıca, açılır üçgenin rengini nasıl değiştirebilirim (yukarı dönük, vurgulu değil)? Turuncu ve kahverengi tabanlı bir web sitesi üzerinde çalışıyorum ve bu mavi şey gerçekten sinir bozucu.

Muhtemel Bir Neden

Bu, Modal eklentisi için JavaScript iki kez yüklendiğinde görülen tipik davranıştır. Lütfen eklentinin iki kez yüklenmediğinden emin olun. Kullandığınız platforma bağlı olarak, kip kodu bir sayı kaynağından yüklenebilir. Yaygın olanlardan bazıları:

• bootstrap.js (tam BootStrap JS paketi)
• bootstrap.min.js (yukarıdakiyle aynı, küçültülmüş)
• bootstrap-modal.js (bağımsız eklenti)
• bir bağımlılık yükleyici, ör. require('bootstrap')

Hata Ayıklama İpuçları

Başlamak için iyi bir yer, kayıtlı clickolay dinleyicilerini tarayıcınızdaki geliştirici araçlarını kullanarak incelemektir . Örneğin Chrome, dinleyiciyi kaydetmek için kodun bulunabileceği JS kaynak dosyasını listeler. Başka bir seçenek de, sayfadaki kaynaklarda Kalıcı kodda bulunan bir kelime öbeğini aramayı denemektir var Modal.

Ne yazık ki, bunlar her durumda her zaman bir şeyler bulamaz. Ağ isteklerini incelemek, bir sayfaya yüklenen her şeyin resmini vermekte biraz daha sağlam olabilir.

A (Kırık) Demo

Burada hem yük ne olur bir demo bootstrap.js ve önyükleme-modal.js (sadece deneyiminizi onaylamak için):

Plunker

Söz konusu sayfadaki kaynağın altına inerseniz<script> , bootstrap-modal.js satırını kaldırabilir veya yorum yazabilir ve ardından modun artık beklendiği gibi çalışacağını doğrulayabilirsiniz.

Aynı problemim vardı ama farklı bir nedeni vardı. Belgeleri takip ettim ve böyle bir düğme oluşturdum:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

Tıkladığımda hiçbir şeyin olmayacağı ortaya çıktı. Ancak, düğme <form>geçici olarak sadece aynı sayfayı getiren bir düğmedeydi.

type="button"Düğme öğesine ekleyerek bunu düzelttim , böylece tıklandığında formu göndermeyecekti.

Benim için işe yarayan şey,

data-toggle="modal"

düğmesini tıklayın. Düğmenin kendisi herhangi bir öğe olabilir - bir bağlantı, div, düğme vb.

Bu sorudaki diğer yararlı cevaplardan sonra, mvc uygulamamda yinelenen bir bootstrap referansı için bir süre aradım.

Sonunda buldum - kullandığım başka bir kütüphaneye dahil edildi, bu yüzden hiç belirgin değildi! ( datatables.net).

Hala bu sorunu alıyorsanız, sizin için önyükleme dahil olabilecek diğer kitaplıkları arayın. ( datatables.netbootstrap ile veya bootstrap olmadan bir indirme belirlemenizi sağlar - diğerleri de aynısını yapar).

Bu yüzden bootstrap.min.jsbenim bundle.configve tüm iyi çalıştı kaldırıldı .

Aynı belirti, bootstrap-sassgem tarafından sağlanan Bootstrap ile bir Rails uygulaması bağlamında ve @ merv'in cevabı beni doğru yola koydu.

Dosyamda application.jsşunlar vardı:

//= require bootstrap
//= require bootstrap-sprockets

Düzeltme iki satırdan birini kaldırmak oldu. Gerçekten de, geminin benioku bu hatayla ilgili sizi uyarır. Benim hatam.

Kodum bir şekilde bootstrap.min.js iki kez dahil edildi. Onlardan birini kaldırdım ve şimdi her şey yolunda gidiyor.

e.preventDefault(); jquery ui ile

Benim için bu sorun, jquery ui düğmesinde tıklama yöntemini geçersiz kılma ile oluştu ve varsayılan olarak tıklatmayla sayfanın yeniden yüklenmesine neden oldu.

Sorun, jquery kullanarak bir olay dinleyicisi iki kez eklerseniz oluşabilir. Örnek olarak, bağlantıyı kesmeden ayarlayabilirsiniz:

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal('toggle')
            })

Bu durumda, olay arka arkaya iki kez ateşlenir ve mod kaybolur.

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal()
                $("#fixerrormodal").modal('toggle')
            })

Örneklere bakınız: http://embed.plnkr.co/i5xB1WbX7zgXrbDMhNAW/preview

@Gpasse'nin örneğinde gösterdiği aynı semptomla karşılaştım. İşte kodum ...

<form...>
  <!-- various inputs with form submit --->

  <!-- button opens modal to show dynamic info -->
  <button id="myButton" class="btn btn-primary">Show Modal</button>
</form>

<div id="myModal" class="modal fade" ...>
</div>

<script>
  $( '#myButton' ).click( function() {
    $( '#myModal' ).modal();
  )};
</script>

@Bhargav'ın önerdiği gibi, sorunum formu göndermeye çalışan ve sayfayı yeniden yükleyen düğmeden kaynaklanıyordu. Düğmeyi <a>aşağıdaki gibi bir bağlantıya değiştirdim :

<a href="#" id="myButton" class="btn btn-primary">Show Modal</a>

... ve sorunu çözdü.

NOT: Henüz bir yorum veya oy eklemek için yeterli itibarım yok ve biraz açıklama ekleyebileceğimi hissettim.

Ben de aynı sorunu vardı, ama benim için böyle oldu çünkü kalıcı form içinde "gönder" türü bir düğme vardı. Değiştim

    <input  type='submit' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

için

    <input  type='button' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

Bu da ortadan kaybolma sorununu çözdü.

Benim durumumda, ben sadece tek bir bootstrap.js, dahil jquery.js dosyası vardı ama yine de böyle bir hata alıyorum ve düğme için kodum böyle bir şeydi:

<script type="text/javascript">
$(document).ready(function(){
   $("#bttn_<?php echo $rnt['id'];?>").click(function(){
      $("#myModal_<?php echo $rnt['id'];?>").modal('show');
   });
});
</script>

Basit ekledi e.preventDefault (); ve çekicilik gibi çalıştı.

Yani, yeni kodum aşağıdaki gibiydi:

<script type="text/javascript">
$(document).ready(function(){
  e.preventDefault();
  $("#bttn_<?php echo $rnt['id'];?>").click(function(){
     $("#myModal_<?php echo $rnt['id'];?>").modal('show');
  });
});
</script>

Bu sorunla bugün kendimle karşılaştım ve sadece Chrome'da oldu. Beni farkettiren şey bir render sorunu olabilir. Belirli modalın kendi oluşturma katmanına taşınması sorunu çözdü.

#myModal {
  -webkit-transform: translate3d(0, 0, 0);
}

Benim durumumda, bir düğmeyi tıklatmak sayfanın (istenmeyen) yeniden yüklenmesine neden olur.

İşte benim düzeltmem:

<button class="btn btn-success" onclick="javascript: return false;" 
data-target="#modalID" data-toggle="modal">deaktivieren</button>

Benim durumumda actionlinkMVC düğmesi kullanmak var ve ben bu sorunla karşı karşıya, ben yukarıda ve diğer birçok çözüm denedim, ama yine de bu sorunla karşı karşıya, sonra kod hatamı fark.

Kullanarak javascript modal çağırdı

 $('#ModalId').modal('show');

Hatadan önce bu düğmeyi kullanıyorum

<a href="" onclick="return Edit();" class="btn btn-primary">Edit</a>

Bu düğmeye href özelliği için hiçbir değeri var, bu yüzden sorunla karşı karşıya.

Sonra bu düğme kodunu bu şekilde düzenlerim

 <a href="#" onclick="return Edit();" class="btn btn-primary">Edit</a>

sonra sorun çözüldü sadece bir hata nedeniyle ilk #.

bunun size yardımcı olup olmayacağını görün.

Yine başka bir neden / çözüm! JS kodum vardı:

$("#show_survey").click(function() {
  $("#survey_modal").modal("show")
})

Ancak HTML kodum zaten şu şekilde yazılmıştır:

<a class="small-text link" data-target="#survey_modal" data-toggle="modal" href="#" id="show_survey">Take a quick 7 question survey!</a>

Bu da, çoğaltmanın kodu nasıl girdiği ve modun açılıp kapanmasına nasıl neden olduğunun başka bir permütasyonudur. Benim durumumda data-targetve data-toggleBootstrap başına dokümanlar html zaten modal çalışmak için tetikler. JS kodu bu nedenle gereksizdir ve kaldırıldığında çalışır.

Aynı problemi asp.NET ile bir proje üzerinde çalışırken de yaşadım. Bootstrap 3.1.0 kullanıyordum ve Bootstrap 2.3.2'ye indirilmesini çözdüm.

Bende sorun vardı, eğer düğme bir etiketi daha sonra modal bir kez görünür ve düğmeyi formun dışına alarak kısa sürede kaybolur ve sorunu giderir. Teşekkürler bu iş parçacığında sona erdi! Herkese +1.

Mobil cihazlarda test sırasında aynı sorunla karşılaşıyordum ve bu hile benim için çalıştı

<a type="submit" class="btn btn-primary" data-toggle="modal" href="#myModal">Submit</a> 

Düğmeyi çalışması gereken bağlantı etiketi olarak değiştirin, sorun, tür düğmesi nedeniyle gönderilmeye çalışıldığı için oluşur, böylece modal hemen kaybolur <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> .

Benim durumumda, application.html.erb'nin başına CDN ekledim ve ayrıca yukarıdaki belgeler ve gönderiler sayesinde tahmin ettiğim 'jquery-rails' gemini yükledim.

CDN'yi (aşağıda) application.html.erb'nin başından yorumladım ve mod uygun şekilde açık kalıyor.

<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>-->

Ben de aynı sorunu yaşadım. Benimle sorun, bir bağlantı basarak ve jquery ile onay isteyen modal görüntülemek oldu.

Aşağıdaki kod modeli hemen gösterdi ve hemen kayboldu:

<a href="" onclick="do_some_stuff()">Hey</a>

Href '#' ekleyerek sona erdi, böylece bağlantı herhangi bir yere gitmeyecek ve sorunumu çözdü.

<a href="#" onclick="do_some_stuff()">Hey</a>

Kaldırmayı denedin mi

data-dismiss="modal"

Bu eski olduğunu biliyorum, ama kontrol etmek için başka bir şey - sadece bir veri-hedef = özniteliğiniz olduğundan emin olun. Ben çoğaltılmıştı ve sonuç bu iş parçacığına göre oldu.

bootstrapProjeme yoluyla ekledim bower, sonra bootstrap.min.jsdosyayı ve dosyadan sonra içe aktardım modal.js. (Kipte açılan düğme bir formun içindedir). Sadece ithalatını kaldırıyorum modal.jsve benim için çalışıyor.

datatable ile codeigniter 3 bootstrap kullanan herkes.

aşağıda config / ci_boostrap.php dosyasındaki düzeltmem

//'assets/dist/frontend/lib.min.js',
//lib.min.js has conflict with datatables.js and i removed it replace with jquery.js
'assets/dist/frontend/jquery-3.3.1.min.js',
'assets/dist/frontend/app.min.js',
'assets/dist/datatables.js'

Aynı sorunla yüzleşmek zorunda kaldı. Nedeni ile aynı @merv. Sorun sayfaya bir takvim bileşeni eklenmişti. Bileşenin kendisi takvim açılır penceresinde kullanılacak kalıcı özelliği ekler.

Dolayısıyla model pop-up'ını kırmanın nedenleri aşağıdakilerden biri veya daha fazlası olacaktır

• Birden fazla bootstrap js sürümü / dosyası yükleniyor (simge durumuna küçültülmüş ...)
• Önyüklemenin kullanıldığı sayfaya harici bir takvim ekleme
• Sayfaya özel uyarı veya açılır kitaplık ekleme
• Açılır pencere davranışı ekleyen diğer tüm kütüphaneler

Angular (5) ile çalışırken aynı sorunla karşılaşıyorum, ancak benim durumumda şu şekilde çözdüm:

component.html

<button type="button" class="btn btn-primary"  data-target="#myModal" 
(click)="showresult()">fff</button>

<div class="modal" id="myModal" role="dialog"  tabindex="-1" data-backdrop="false">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Save changes</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

component.ts

NOT: ts dosyasında "declare var $: any;" olarak jquery almanız gerekir

  showresult(){
    debugger
    $('#myModal').modal('show');
  }

Yaptığım değişiklikler:

• "data-toggle =" modal "Button etiketinden kaldırıldı (@miCRoSCoPiC_eaRthLinG sayesinde bu cevap burada bana yardımcı oluyor) benim durumumda modal gösterilmesini sağladım (click) =" showresult () "

• inside component.ts Jquery ($) ve iç düğme tıklama yöntemi showresult () bildirmek gerekir "$ ('# myModal'). modal ('show');"

Aynı sorunu yaşadım çünkü modalımı aşağıda gösterildiği gibi iki kez değiştirdim:

statusCode: {
    410: function (request, status, error) { //custom error code

        document.getElementById('modalbody').innerHTML = error;
        $('#myErrorModal').modal('toggle')
    }
},
error: function (request, error) {

    document.getElementById('modalbody').innerHTML = error;
    $('#myErrorModal').modal('toggle')
}

Şunlardan birini kaldırdım:

$ ( '# MyErrorModal'). Modal ( 'geçiş')

ve sihir gibi çalıştı!