Luncurkan Bootstrap Modal pada pemuatan halaman

Saya tidak tahu javascript sama sekali. Dokumentasi bootstrap mengatakan untuk

Panggil modal melalui javascript: $ ('# myModal'). Modal (opsi)

Saya tidak tahu bagaimana menyebutnya pada halaman yang dimuat. Dengan menggunakan kode yang disediakan pada halaman bootstrap saya dapat berhasil memanggil Modal pada klik elemen, tapi saya ingin segera memuatnya pada halaman memuat.

Cukup bungkus modal yang ingin Anda panggil pada pemuatan halaman di dalam loadacara jQuery di bagian kepala dokumen Anda dan itu akan muncul, seperti:

JS

<script type="text/javascript">
    $(window).on('load',function(){
        $('#myModal').modal('show');
    });
</script>

HTML

<div class="modal hide fade" id="myModal">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

Anda masih dapat memanggil modal dalam halaman Anda dengan memanggilnya dengan tautan seperti:

<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>

Kamu tidak perlu javascript menunjukkan modal

Cara paling sederhana adalah mengganti "sembunyikan" dengan "dalam"

class="modal fade hide"

begitu

class="modal fade in"

dan Anda perlu menambahkan onclick = "$('.modal').hide()" tombol tutup;

PS: Saya pikir cara terbaik adalah menambahkan skrip jQuery:

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

Cukup tambahkan berikut-

class="modal show"

Contoh kerja-

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal show" 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>

Anda dapat mencoba kode runnable ini-

$(window).load(function()
{
    $('#myModal').modal('show');
});

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</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>

Lebih banyak dapat ditemukan di sini .

Pikirkan Anda punya jawaban lengkap Anda.

mengenai apa yang dikatakan Andre Ilich, Anda harus menambahkan skrip js setelah baris dalam apa yang Anda sebut jquery:

<script src="content/bootstrapJS/jquery-2.1.1.min.js" type="text/javascript"></script>

<script type="text/javascript">
     $(window).load(function(){
         $('#myModal').modal('show');
      });
</script>

dalam kasus saya itu adalah masalah semoga membantu

Dalam kasus saya, menambahkan jQuery untuk menampilkan modal tidak berfungsi:

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

Yang sepertinya karena modal memiliki atribut aria-hidden = "true":

<div class="modal fade" aria-hidden="true" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

Menghapus atribut itu diperlukan serta jQuery di atas:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

Perhatikan bahwa saya mencoba mengubah kelas modal dari modal fademenjadi modal fade in, dan itu tidak berhasil. Juga, mengubah kelas dari modal fademenjadi modal showmenghentikan modal agar tidak bisa ditutup.

Inilah solusi [tanpa inisialisasi javascript!]

Saya tidak dapat menemukan contoh tanpa menginisialisasi modal Anda dengan javascript $('#myModal').modal('show'), jadi inilah saran tentang bagaimana Anda dapat menerapkannya tanpa penundaan javascript pada pemuatan halaman.

1. Edit div wadah modal Anda dengan kelas dan gaya:

<div class="modal in" id="MyModal" tabindex="-1" role="dialog" style="display: block; padding-right: 17px;">

2. Edit tubuh Anda dengan kelas dan gaya:

   <body class="modal-open" style="padding-right:17px;">

3. Tambahkan modal-backdrop div

   <div class="modal-backdrop in"></div>

4. Tambahkan skrip

   $(document).ready(function() {
       $('body').css('padding-right', '0px');
       $('body').removeClass('modal-open');
       $('.modal-backdrop').remove();
   
       $('#MyModal').modal('show'); });

   Apa yang akan terjadi adalah bahwa html untuk modal Anda akan dimuat pada pemuatan halaman tanpa javascript, (tanpa penundaan). Pada titik ini Anda tidak dapat menutup modal, jadi itu sebabnya kami memiliki skrip document.ready, untuk memuat modal dengan benar ketika semuanya dimuat. Kami benar-benar akan menghapus kode khusus dan kemudian menginisialisasi modal, (lagi), dengan .modal ('show').

Anda dapat mengaktifkan modal tanpa menulis JavaScript apa pun hanya melalui atribut data.

Opsi "show" yang disetel ke true menunjukkan modal ketika diinisialisasi:

<div class="modal fade" tabindex="-1" role="dialog" data-show="true"></div>

Seperti yang telah disebutkan orang lain, buat modal Anda dengan tampilan: blok

<div class="modal in" tabindex="-1" role="dialog" style="display:block">
...

Tempatkan latar belakang di mana saja di halaman Anda, itu tidak perlu harus di bagian bawah halaman

<div class="modal-backdrop fade show"></div> 

Kemudian, untuk dapat menutup dialog lagi, tambahkan ini

<script>
    $("button[data-dismiss=modal]").click(function () {
        $(".modal.in").removeClass("in").addClass("fade").hide();
        $(".modal-backdrop").remove();
    });
</script>

Semoga ini membantu

Diuji dengan Bootstrap 3 dan jQuery (2.2 dan 2.3)

$(window).on('load',function(){
  $('#myModal').modal('show');
});



<!-- 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"><i class="fa fa-exclamation-circle"></i>&nbsp; //Your modal Title</h4>
        </div>
        <div class="modal-body">
          //Your modal Content
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
        </div>
      </div>

    </div>
</div>

https://jsfiddle.net/d7utnsbm/

<div id="ModalStart" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
          <p><i class="icon-spinner icon-spin icon-4x"></i></p>
    </div>
</div>

Anda dapat menampilkannya di awal bahkan tanpa Javascript. Hapus saja kelas "sembunyikan".

class="Modal"

Selain jawaban user2545728 dan Reft, tanpa javascript tetapi denganmodal-backdrop in

3 hal untuk ditambahkan

1. div dengan kelas modal-backdrop insebelum kelas .modal
2. style="display:block;" ke kelas .modal
3. fade in bersama dengan kelas .modal

Contoh

<div class="modal-backdrop in"></div>

<div class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="channelModal" style="display:block;">

    <div class="modal-dialog modal-lg" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <h4 class="modal-title" id="channelModal">Welcome!</h4>

            </div>

            <div class="modal-body" style="height:350px;">

                How did you find us?

            </div>

        </div>

    </div>

</div>

Perbarui 2020 - Bootstrap 4

Modal markup telah sedikit berubah untuk Bootstrap 4. Inilah cara Anda dapat membuka modal pada pemuatan halaman, dan secara opsional menunda tampilan modal ...

$(window).on('load',function(){
    var delayMs = 1500; // delay in milliseconds

    setTimeout(function(){
        $('#myModal').modal('show');
    }, delayMs);
});    

<div class="modal fade" id="myModal">
      <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">My Modal</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary mx-auto" data-dismiss="modal">Close</button>
                </div>
            </div>
      </div>
</div>

Demo di Codeply

Dalam bootstrap 3 Anda hanya perlu menginisialisasi modal melalui js dan jika pada saat halaman memuat markup modal di halaman modal akan muncul.

Jika Anda ingin mencegah ini, gunakan opsi di show: falsemana Anda menginisialisasi modal. Sesuatu seperti ini: $('.modal').modal({ show: false })

Anda mungkin ingin tetap jquery.jsditangguhkan untuk memuat halaman lebih cepat. Namun, jika jquery.jsditangguhkan $(window).loadmungkin tidak berfungsi. Maka Anda dapat mencoba

setTimeout(function(){$('#myModal').modal('show');},3000);

itu akan memunculkan modal Anda setelah halaman sepenuhnya dimuat (termasuk jquery)

Untuk menghindari bootstrap ditolak dan kehilangan fungsinya, cukup buat tombol peluncuran reguler, berikan ID, dan 'klik' menggunakan jquery, seperti: Tombol peluncuran:

<button type="button" id="btnAnouncement" class="btn btn-primary" data-toggle="modal" data-target="#modalAnouncement">
  See what´s new!
</button>

Pemicu jQuery:

$(document).ready(function () {
  $('#btnAnouncement').click();
)}

Semoga ini bisa membantu. Bersulang!

Contoh sederhana Buat pemintal loader dari modal bootstrap

<!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.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script>
  $(document).ready(function(){
  $('#myModal').modal('show'); 
  setTimeout(function(){
  $('#myModal').modal('hide'); 
  }, 5000);
   });
  </script>
  <style>
.loader {
  border: 13px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 100px;
  height: 100px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.modal-dialog{
width: 150px;
    margin: 10% auto;
}
.modal-content{
background-color: transparent; 
   border: 0;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
}
</style>
</head>
<body>

<div class="container">

  <!-- Modal -->
  <div class="modal fade" data-backdrop="static" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">

        <div class="modal-body">
         <div class="loader"></div>
        </div>

      </div>

    </div>
  </div>

</div>

</body>
</html>