Modal Bootstrap segera menghilang

Saya sedang mengerjakan situs web menggunakan bootstrap.

Pada dasarnya, saya ingin menggunakan modal di halaman rumah, dipanggil oleh tombol di Unit Pahlawan.

Kode tombol:

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

Kode modal:

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

Masalahnya adalah begitu saya mengklik tombol, modal menghilang dan kemudian segera menghilang.

Saya menghargai bantuan apa pun.

Juga, bagaimana cara mengubah warna segitiga dropdown (menunjuk ke atas, tidak membawa)? Saya sedang mengerjakan sebuah situs web yang didasarkan pada warna oranye dan coklat dan hal biru itu sangat menjengkelkan.

Penyebab yang Mungkin

Ini adalah perilaku umum ketika JavaScript untuk plugin Modal dimuat dua kali. Silakan periksa untuk memastikan bahwa plugin tidak bertambah dua kali lipat. Tergantung pada platform yang Anda gunakan, kode modal dapat diambil dari sumber nomor. Beberapa yang umum adalah:

• bootstrap.js (paket BootStrap JS lengkap)
• bootstrap.min.js (sama seperti di atas, baru saja diperkecil)
• bootstrap-modal.js (plugin mandiri)
• loader ketergantungan, misalnya, require('bootstrap')

Tips Debugging

Tempat yang baik untuk memulai adalah memeriksa clickpendengar acara terdaftar menggunakan alat pengembang di browser Anda. Chrome, misalnya, akan mencantumkan file sumber JS tempat kode untuk mendaftarkan pendengar dapat ditemukan. Pilihan lain adalah mencoba mencari sumber pada halaman untuk frasa yang ditemukan dalam kode Modal, misalnya var Modal,.

Sayangnya, ini tidak selalu menemukan hal-hal dalam semua kasus. Memeriksa permintaan jaringan bisa menjadi sedikit lebih kuat untuk memberi Anda gambaran tentang segala sesuatu yang dimuat pada halaman.

Demo (Rusak)

Berikut ini demo tentang apa yang terjadi ketika Anda memuat bootstrap.js dan bootstrap-modal.js (hanya untuk mengonfirmasi pengalaman Anda):

Plunker

Jika Anda gulir ke bawah ke bagian bawah sumber pada halaman itu, Anda dapat menghapus atau mengomentari <script>baris untuk bootstrap-modal.js dan kemudian memverifikasi bahwa sekarang modal akan berfungsi seperti yang diharapkan.

Saya memiliki masalah yang sama tetapi memiliki penyebab yang berbeda. Saya mengikuti dokumentasi dan membuat tombol seperti:

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

Ketika saya mengkliknya, tampaknya tidak ada yang terjadi. Namun, tombol itu berada di <form>yang sementara hanya mengambil halaman yang sama.

Saya memperbaiki ini dengan menambahkan type="button"ke elemen tombol, sehingga tidak akan mengirimkan formulir ketika diklik.

Bagi saya yang berhasil adalah menghapus

data-toggle="modal"

dari tombol. Tombol itu sendiri dapat berupa elemen apa saja - tautan, div, tombol dll.

Saya mencari beberapa saat untuk referensi duplikat bootstrap di aplikasi MVC saya, setelah jawaban yang bermanfaat lainnya pada pertanyaan ini.

Akhirnya menemukannya - itu termasuk dalam perpustakaan lain yang saya gunakan, jadi tidak jelas sama sekali! ( datatables.net).

Jika Anda masih mendapatkan masalah ini, cari perpustakaan lain yang mungkin menyertakan bootstrap untuk Anda. ( datatables.netmemungkinkan Anda menentukan unduhan dengan atau tanpa bootstrap - orang lain melakukan hal yang sama).

Jadi saya menghapus bootstrap.min.jsdari saya bundle.configdan semuanya bekerja dengan baik.

Gejala yang sama, dalam konteks aplikasi Rails dengan Bootstrap yang disediakan oleh bootstrap-sasspermata, dan jawaban @ merv menempatkan saya di jalur yang benar.

application.jsFile saya memiliki yang berikut:

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

Cara mengatasinya adalah menghapus salah satu dari dua baris. Memang, readme permata memperingatkan Anda tentang kesalahan ini. Salahku.

Kode saya entah bagaimana menyertakan bootstrap.min.js dua kali. Saya menghapus salah satunya dan semuanya berfungsi dengan baik sekarang.

e.preventDefault(); dengan jquery ui

Bagi saya masalah ini terjadi dengan metode klik menimpa pada tombol jquery ui, menyebabkan halaman dimuat ulang secara default.

Masalahnya juga dapat terjadi jika menggunakan jquery Anda melampirkan pendengar acara dua kali. Sebagai contoh, Anda akan mengatur tanpa mengikat:

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

Jika ini terjadi, acara dipecat dua kali berturut-turut dan modal menghilang.

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

Lihat contoh: http://embed.plnkr.co/i5xB1WbX7zgXrbDMhNAW/preview

Saya mengalami gejala yang sama dengan yang ditunjukkan @gpasse dalam contohnya. Ini kode saya ...

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

Seperti yang disarankan oleh @Bhargav, masalah saya disebabkan oleh tombol yang mencoba mengirim formulir, dan memuat ulang laman. Saya mengubah tombol ke <a>tautan sebagai berikut:

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

... dan itu memperbaiki masalah.

CATATAN: Saya belum memiliki reputasi yang cukup untuk hanya menambahkan komentar atau upvote, dan saya merasa bahwa saya dapat menambahkan sedikit klarifikasi.

Saya juga memiliki masalah yang sama, tetapi bagi saya itu terjadi karena saya memiliki tombol dengan tipe "kirim" dalam bentuk modal. aku berubah

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

untuk

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

Dan itu memperbaiki masalah penghilangan.

Dalam kasus saya, saya hanya memiliki satu bootstrap.js, file jquery.js dimasukkan tetapi masih mendapatkan jenis kesalahan seperti itu, dan kode saya untuk tombol adalah sesuatu seperti ini:

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

Saya sederhana menambahkan e.preventDefault (); untuk itu dan itu bekerja seperti pesona.

Jadi, kode baru saya seperti di bawah ini:

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

Saya menemukan masalah ini sendiri hari ini dan kebetulan hanya di Chrome. Apa yang membuat saya sadar itu mungkin masalah rendering. Memindahkan modal spesifik ke lapisan renderingnya sendiri telah menyelesaikannya.

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

Dalam kasus saya, klik pada tombol menyebabkan (tidak diinginkan) memuat kembali halaman.

Ini perbaiki saya:

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

Dalam kasus saya, saya telah menggunakan actionlinktombol di MVC dan saya menghadapi masalah ini, saya telah mencoba banyak solusi di atas dan lainnya, tetapi masih menghadapi masalah itu, maka saya menyadari kesalahan saya dalam kode.

Saya telah memanggil modal dalam javascript dengan menggunakan

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

Sebelum kesalahan saya menggunakan tombol ini

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

Saya tidak memiliki nilai untuk properti href di tombol ini jadi saya menghadapi masalah ini.

Lalu saya edit kode tombol ini seperti ini

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

maka masalah diselesaikan hanya kesalahan karena tidak ada # di yang pertama.

lihat apakah ini akan membantu Anda.

Penyebab lain / solusi! Saya punya dalam kode JS saya:

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

Tetapi kode HTML saya sudah ditulis sebagai:

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

Jadi ini adalah permutasi lain tentang bagaimana duplikasi memasukkan kode dan menyebabkan modal terbuka kemudian tutup. Dalam kasus saya, data-targetdan data-toggledalam html sesuai Bootstrap docs sudah memicu modal untuk bekerja. Karenanya, kode JS adalah mubazir, dan ketika dihapus, ia berfungsi.

Saya memiliki masalah yang sama dengan mengerjakan proyek dengan asp.NET. Saya menggunakan bootstrap 3.1.0 menyelesaikannya downgrade ke Bootstrap 2.3.2.

Saya juga punya masalah, jika tombol di dalam a tandai maka modal muncul sekali dan segera menghilang, mengeluarkan tombol dari formulir memperbaiki isue. Terima kasih, saya berakhir di utas ini! +1 untuk semua.

Saya menghadapi masalah yang sama selama pengujian pada perangkat seluler dan trik ini berhasil untuk saya

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

Ubah tombol menjadi anchor tag yang seharusnya berfungsi, masalah terjadi karena tombol ketiknya saat mencoba mengirim sehingga modal menghilang segera <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> .

Dalam kasus saya, saya memiliki CDN yang termasuk dalam kepala application.html.erb dan juga menginstal permata 'jquery-rails', yang saya tebak berkat dokumentasi dan posting di atas, adalah mubazir.

Saya hanya berkomentar CDN (di bawah) dari kepala application.html.erb dan modal tetap terbuka.

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

Saya memiliki masalah yang sama juga. Masalahnya dengan saya adalah saya menampilkan modal pada menekan tautan dan meminta konfirmasi dengan jquery.

Kode di bawah ini menampilkan modal dan yang menghilang segera:

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

Saya akhirnya menambahkan '#' ke href sehingga tautannya tidak ke mana-mana dan itu memecahkan masalah saya.

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

Sudahkah Anda mencoba menghapus

data-dismiss="modal"

Saya tahu ini sudah tua, tetapi ada satu hal lagi yang perlu diperiksa - pastikan Anda hanya memiliki satu atribut data-target =. Saya telah menggandakannya dan hasilnya sesuai dengan utas ini.

Saya telah menambahkan bootstrapke proyek saya melalui bower, kemudian saya mengimpor bootstrap.min.jsfile dan setelah modal.jsfile. (Tombol yang membuka modal ada di dalam formulir). Saya hanya menghapus impor untuk modal.jsdan itu berfungsi untuk saya.

kalau-kalau ada yang menggunakan codeigniter 3 bootstrap dengan datatable.

di bawah ini adalah perbaikan saya di config / ci_boostrap.php

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

Harus menghadapi masalah yang sama. Alasannya sama dengan @merv. Masalahnya adalah dengan komponen kalender ditambahkan ke halaman. Komponen itu sendiri menambahkan fitur modal untuk digunakan dalam popup kalender.

Jadi alasan untuk memecah popup model adalah satu atau lebih hal berikut

• Memuat lebih dari satu versi / file bootstrap (minified ...)
• Menambahkan kalender eksternal ke halaman tempat bootstrap digunakan
• Menambahkan lansiran ubahsuaian atau munculan ke halaman
• Pustaka lain yang menambahkan perilaku popup

saat bekerja dengan Angular (5), saya menghadapi masalah yang sama, tetapi dalam kasus saya, saya menyelesaikannya sebagai berikut:

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>

komponen.ts

CATATAN: perlu mengimpor jquery dalam file ts sebagai "menyatakan var $: any;"

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

Perubahan yang saya lakukan:

• menghapus "data-toggle =" modal "dari tag Button (terima kasih kepada @miCRoSCoPiC_eaRthLinG jawaban ini membantu saya di sini) dalam kasus saya ini menunjukkan modal sehingga saya membuat (klik) =" showresult () "

• di dalam component.ts perlu mendeklarasikan Jquery ($) dan metode klik tombol di dalam showresult () panggilan "$ ('# myModal'). modal ('show');"

Saya memiliki masalah yang sama karena saya beralih modal saya dua kali seperti yang ditunjukkan di bawah ini:

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

Saya menghapus satu kejadian:

$ ('# myErrorModal'). modal ('toggle')

dan itu bekerja seperti sulap!