Sayfa yüklemesinde Bootstrap Modal'ı başlat

Javascript bilmiyorum. Bootstrap belgeleri

Modal'ı javascript yoluyla arayın: $ ('# myModal'). Modal (seçenekler)

Bunu bir sayfa yüklemesinde nasıl arayacağımı bilmiyorum. Önyükleme sayfasında verilen kodu kullanarak, bir öğe tıklamasıyla Modal'ı başarıyla çağırabilirim, ancak bir sayfa yüklemesinde hemen yüklenmesini istiyorum.

Sadece aramak istediğiniz modal'ı loadbelgenizin baş kısmındaki bir jQuery etkinliğinin içine sarın ve açılır pencere, şöyle olmalıdır:

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>

Yine de sayfanızdaki modal'ı şunun gibi bir bağlantıyla çağırabilirsiniz:

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

javascriptModsal göstermene gerek yok

En basit yol "gizle" yerine "içinde"

class="modal fade hide"

yani

class="modal fade in"

ve onclick = "$('.modal').hide()"kapat düğmesi eklemek gerekir ;

PS: Bence en iyi yol jQuery komut dosyası eklemek olduğunu:

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

Sadece aşağıdakileri ekleyin-

class="modal show"

Çalışma Örneği

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

Bu çalıştırılabilir kodu deneyebilirsiniz.

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

Daha fazlasını burada bulabilirsiniz .

Tam cevabını aldığını düşün.

Andre's Ilich'in jquery adını, jquery olarak adlandırdığınız satırdan sonra eklemeniz gerektiğiyle ilgili:

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

benim durumumda sorun buydu umarım yardımcı olur

Benim durumumda modal görüntülemek için jQuery ekleme işe yaramadı:

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

Bu, modal aria-hidden = "true" niteliğine sahip olduğu için görünüyordu:

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

Bu özniteliğin yanı sıra yukarıdaki jQuery'nin kaldırılması gerekiyordu:

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

Ben gelen kalıcı sınıfları değişen çalıştı Not modal fadeiçin modal fade inve bu işi yoktu. Ayrıca, gelen sınıfları değişen modal fadeiçin modal showkapalı olması mümkün olmaktan modal durdu.

Heres bir çözüm [javascript başlatma olmadan!]

Ben bir örnek bulamadık olmadan javascript ile modal başlatılırken, $('#myModal').modal('show')onsuz uygulamaya nasıl bu kadar heres bir öneri javascript gecikme sayfa yüklemesinde.

1. Kalıcı konteyner div'inizi sınıf ve stille düzenleyin:

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

2. Vücudunuzu sınıf ve stille düzenleyin:

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

3. Modal-zemin div ekle

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

4. Komut dosyası ekle

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

   Ne olacak modal için html herhangi bir javascript olmadan sayfa yükü yüklenecektir, (gecikme yok). Bu noktada kipi kapatamazsınız, bu yüzden her şey yüklendiğinde kipi düzgün şekilde yüklemek için document.ready komut dosyasına sahibiz. Özel kodu gerçekten kaldıracağız ve daha sonra .modal ('show') ile modal'ı (tekrar) başlatacağız.

Yalnızca veri özellikleri aracılığıyla herhangi bir JavaScript yazmadan kalıbı etkinleştirebilirsiniz.

True olarak ayarlanmış "show" seçeneği, başlatıldığında kipi gösterir:

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

Diğerlerinin de belirttiği gibi, modalınızı display: block ile oluşturun

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

Arka planı sayfanızın herhangi bir yerine yerleştirin, sayfanın altında olması gerekmez.

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

Ardından, iletişim kutusunu tekrar kapatabilmek için bunu ekleyin

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

Bu yardımcı olur umarım

Bootstrap 3 ve jQuery (2.2 ve 2.3) ile test edildi

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

Javascript olmadan bile başlangıçta gösterebilirsiniz. Sadece "hide" sınıfını silin.

class="Modal"

User2545728 ve Reft yanıtlarına ek olarak, javascript olmadan ancakmodal-backdrop in

Eklenecek 3 şey

1. modal-backdrop in.modal sınıfından önceki sınıflarla bir div
2. style="display:block;" .modal sınıfına
3. fade in .modal sınıfı ile birlikte

Misal

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

Güncelleme 2020 - Bootstrap 4

Modsal işaretleme Bootstrap 4 için biraz değişti. Burada, mod yükünü sayfa yükünde nasıl açabilir ve isteğe bağlı olarak modun gösterilmesini geciktirebilirsiniz ...

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

Codeply üzerinde demo

Bootstrap 3'te sadece modal'ı js aracılığıyla başlatmanız gerekir ve sayfa yükü anında modal işaretleme sayfada ise modal görünecektir.

Bunu önlemek show: falseistiyorsanız, modu başlattığınız seçeneği kullanın . Bunun gibi bir şey: $('.modal').modal({ show: false })

Daha jquery.jshızlı sayfa yüklemesi için ertelenmiş kalmak isteyebilirsiniz . Ancak jquery.jsertelendiği $(window).loadtakdirde işe yaramayabilir. O zaman deneyebilirsin

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

sayfa tamamen yüklendikten sonra modelinizi açar (jquery dahil)

Önyüklemenin geçersiz kılınmasını ve işlevini kaybetmesini önlemek için, normal bir başlatma düğmesi oluşturun, bir Kimlik sağlayın ve jquery kullanarak 'tıklayın': Başlat düğmesi:

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

JQuery tetikleyicisi:

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

Umarım yardımcı olur. Şerefe!

Basit örnek Bir bootstrap modalının yükleyici döndürücüsünü yapma

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