Bagaimana cara membuka jendela modal Bootstrap menggunakan jQuery?

769

Saya menggunakan fungsionalitas Modal Bootstrap jendela Twitter. Ketika seseorang mengklik kirim pada formulir saya, saya ingin menunjukkan jendela modal setelah mengklik tombol "kirim" di formulir.

<form id="myform" class="form-wizard">
    <h2 class="form-wizard-heading">BootStap Wizard Form</h2>
    <input type="text" value=""/>
    <input type="submit"/>
</form>

<!-- Modal -->
<div id="myModal" class="modal hide fade" 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">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>

jQuery:

$('#myform').on('submit', function(ev) {
    $('#my-modal').modal({
        show: 'false'
    }); 


    var data = $(this).serializeObject();
    json_data = JSON.stringify(data);
    $("#results").text(json_data); 
    $(".modal-body").text(json_data); 

    // $("#results").text(data);

    ev.preventDefault();
});
javascript jquery twitter-bootstrap pengguna244394
sumber
Anda memiliki kesalahan ketik pada opsi pertunjukan Anda. Dibutuhkan boolean, jadi jangan letakkan tanda kutip di sekitar 'false' - $ ('# my-modal'). Modal ({show: false});
Darren Parker

Jawaban:

1413

Bootstrap memiliki beberapa fungsi yang dapat dipanggil secara manual pada modals:

$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');

Anda dapat melihat lebih banyak di sini: Komponen modal bootstrap

Khususnya bagian metode .

Jadi, Anda perlu mengubah:

$('#my-modal').modal({
    show: 'false'
});

untuk:

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

Jika Anda ingin membuat sembulan sendiri, berikut video yang disarankan dari anggota komunitas lain:

https://www.youtube.com/watch?v=zK4nXa84Km4

Mengejar
sumber
5
Saya tidak yakin mengapa ini tidak berhasil dalam kasus saya. Saya memiliki kode demo yang sama di halaman saya, dan saya mengkodekan tombol kirim seperti di atas. Namun, ketika saya mengklik kirim, jendela modal berkedip cepat dan hilang. Saya harus mengklik tombol 'kembali' browser untuk mengembalikan halaman.
Chris22
6
Saya menemukan server di sini untuk komentar saya di atas. Tautan rangkap ke bootrap.js di halaman situs.
Chris22
1
Uncaught TypeError: $ (...). Modal bukan fungsi, Ini mungkin saya tetapi ada ide mengapa saya mendapatkan kesalahan ini? (saya punya jQuery)
Vladimir verleg
4
Saya menemukan masalah saya, saya melakukan panggilan ajax ke penyihir file termasuk Jquery. Jika jQuery disertakan 2 kali, itu tidak berfungsi!
Vladimir verleg
2
Saya mencoba .modal('show')tetapi di google chrome browser tidak berfungsi
Durga
89

Selain itu Anda dapat menggunakan via atribut data

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Dalam kasus khusus ini Anda tidak perlu menulis javascript.

Anda dapat melihat lebih banyak di sini: http://getbootstrap.com/2.3.2/javascript.html#modals

Gandarez
sumber
4
Untuk memperjelas: "tidak perlu menggunakan javascript" berarti "tidak perlu menulis javascript", javascript masih digunakan. Saya mencoba mengedit jawabannya tetapi ditolak karena tidak "lebih akurat". Jika Anda mencoba kode di atas dengan javascript dinonaktifkan, itu tidak akan berfungsi. Itu berarti Anda menggunakan javascript untuk saya.
npretto
83

Paling sering, ketika $('#myModal').modal('show');tidak bekerja, itu disebabkan oleh memasukkan jQuery dua kali. Termasuk jQuery 2 kali membuat modals tidak berfungsi.

Hapus salah satu tautan untuk membuatnya berfungsi kembali.

Selain itu, beberapa plugin juga menyebabkan kesalahan, dalam hal ini menambahkan 

jQuery.noConflict(); 
$('#myModal').modal('show');
Vladimir verleg
sumber
3
DataTables dengan versi jQuery yang telah dipaketkan menyebabkan ini untuk saya
Wesley Smith
2
Terima kasih banyak. Saya mengalami masalah yang sama: modal bukan fungsi. Tetapi setelah menambahkan jQuery.noConflict (), ia berfungsi.
Jobayer Ahmmed
1
Perlu dicatat bahwa solusi ini hanya dapat digunakan jika Anda tidak dapat menyelesaikan penyebab root (yaitu hanya menyertakan jQuery sekali). Jika beberapa plugin pihak ketiga menyertakannya, carilah versi yang tidak termasuk atau hubungi pihak ketiga untuk membuatnya.
rybo111
19

Panggil saja metode modal (tanpa melewati parameter apa pun) menggunakan jQuerypemilih.

Berikut ini contohnya:

$('#modal').modal();
Brane
sumber
1
Bagaimana saya meneruskan lebih banyak parameter ke modal saya? Misalnya, ID (dinamis) tertentu?
Pathros
1
Bagaimana Anda membuat ID Anda menjadi dinamis? Apakah Anda membuatnya dengan ID? jika ya, Anda dapat menggunakan fungsionalitas $ (ini) dari jQuery untuk memilih objek saat ini dan memberikan parameter kepadanya.
Brane
13

Jika Anda menggunakan fungsi onclick tautan untuk memanggil modal dengan jQuery, "href" tidak boleh nol.

Sebagai contoh:

... ...
<a href="" onclick="openModal()">Open a Modal by jQuery</a>
... ...
... ...
<script type="text/javascript">

function openModal(){

    $('#myModal').modal();
}       
</script>

Modal tidak dapat ditampilkan. Kode yang benar adalah:

<a href="#" onclick="openModal()">Open a Modal by jQuery</a>
saneryee
sumber
12

Berikut ini cara memuat peringatan bootstrap segera setelah dokumen siap. Sangat mudah tambahkan saja

 $(document).ready(function(){
   $("#myModal").modal();
});

Saya membuat demo di W3Schools.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Here is how to load a bootstrap modal as soon as the document is ready </h2>
  <!-- Trigger the modal with a button -->


  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

<script>
$(document).ready(function(){
   $("#myModal").modal();
});
</script>

</body>
</html>
Luaskan cuplikan

csandreas1
sumber
10

Lihat solusi lengkapnya di sini:

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal_show&stacked=h

Pastikan untuk meletakkan perpustakaan di urutan yang diperlukan untuk mendapatkan hasil:

1- bootstrap.min.css pertama 2- jquery.min.js 3- bootstrap.min.js

(Dengan kata lain jquery.min.js harus dipanggil sebelum bootstrap.min.js)

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script> 

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
A.Aleem11
sumber
7

Saya mencoba beberapa metode yang gagal, tetapi di bawah ini berhasil bagi saya seperti pesona:

$('#myModal').appendTo("body").modal('show');
biasa
sumber
2
Sama! Ini adalah satu-satunya solusi yang bekerja untuk saya juga.
pengz
Apakah Anda yakin itu tidak mau .appendTo("modal-body")?
James A Mohler
@novembersky, Anda perlu memasukkan kode di dalam event klik atau saat halaman memuat menggunakan jquery: $ (dokumen) .ready (function () {$ ("# myModal"). modal ();});
Abhijit Kumar
7

Cobalah untuk menggunakan jQuery daripada $ sign ketika memanggil fungsi, itu berfungsi dalam kasus saya seperti yang Anda lihat di bawah.

jQuery.noConflict(); 
jQuery('#myModal').modal('show');

jQuery.noConflict (); karena ketika jQuery ('# myModal'). modal ('show'); tidak berfungsi, itu disebabkan oleh memasukkan jQuery dua kali. Termasuk jQuery 2 kali membuat modals tidak berfungsi. dan itu akan menyelesaikan masalah dalam kasus itu, seperti dalam kasus saya itu berulang.

Selanjutnya Anda bisa pergi ke tautan ini

Jendela Model Bootstrap Tidak Ditampilkan dengan Memanggil Melalui JQuery

IB
sumber
4

Mencoba

$("#myModal").modal("toggle")

Untuk membuka atau menutup modal dengan id myModal.

Jika hal di atas tidak berfungsi maka itu berarti bootstrap.js telah ditimpa oleh beberapa file js lainnya. Ini solusinya

1: - Pindahkan bootstrap.js ke bawah sehingga akan menimpa file js lainnya.

2: - Pastikan urutannya seperti di bawah ini

<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Other js files -->
<script src="plugins/jQuery/bootstrap.min.js"></script>
Nikhil Mohadikar
sumber
4 
<form id="myform" class="form-wizard">
    <h2 class="form-wizard-heading">BootStap Wizard Form</h2>
    <input type="text" value=""/>
    <input type="submit" id="submitButton"/>
</form>

<!-- Modal -->
<div id="myModal" class="modal hide fade" 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">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>

Anda dapat meluncurkan modal dengan kode di bawah ini.

$(document).ready(function(){
    $("#submitButton").click(function(){
        $("#myModal").modal();
    });
});
Alperzkn
sumber
1

Coba ini

myModal1 adalah id dari modal

$('#myModal1').modal({ show: true });
vivek
sumber
0 
<script type="text/javascript">
    $(function () {
        $("mybtn").click(function () {
            $("#my-modal").modal("show");
        });
    });
</script>
Sahnosh Rahguzar
sumber
3
Saat menjawab pertanyaan yang sudah memiliki jawaban, cobalah untuk memperluas jawaban yang ada. Juga umumnya ide yang baik untuk memasukkan penjelasan tentang bagaimana kode Anda menjawab pertanyaan.
Chris Camaratta
0

Bootstrap 4.3 - lebih lanjut di sini

Tampilkan cuplikan kode

Kamil Kiełczewski
sumber