Lancer Bootstrap Modal au chargement de la page

Je ne connais pas du tout javascript. La documentation de bootstrap dit de

Appelez le modal via javascript: $ ('# myModal'). Modal (options)

Je ne sais pas comment appeler cela sur un chargement de page. En utilisant le code fourni sur la page de démarrage, je peux appeler avec succès le modal sur un clic d'élément, mais je veux qu'il se charge immédiatement lors du chargement d'une page.

Enveloppez simplement le modal que vous souhaitez appeler lors du chargement de la page dans un loadévénement jQuery dans la section d'en-tête de votre document et il devrait apparaître, comme ceci:

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>

Vous pouvez toujours appeler le modal dans votre page avec en l'appelant avec un lien comme ceci:

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

Vous n'avez pas besoin javascriptd'afficher le modal

Le moyen le plus simple est de remplacer "masquer" par "dans"

class="modal fade hide"

alors

class="modal fade in"

et vous devez ajouter un onclick = "$('.modal').hide()"bouton de fermeture;

PS: Je pense que la meilleure façon est d'ajouter un script jQuery:

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

Ajoutez simplement ce qui suit-

class="modal show"

Exemple de travail-

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

Vous pouvez essayer ce code exécutable-

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

Plus d'informations peuvent être trouvées ici .

Pensez que vous avez votre réponse complète.

concernant ce qu'André Ilich dit que vous devez ajouter le script js après la ligne dans ce que vous appelez le 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>

dans mon cas, c'était le problème j'espère que ça aide

Dans mon cas, l'ajout de jQuery pour afficher le modal n'a pas fonctionné:

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

Ce qui semblait être dû au fait que le modal avait l'attribut aria-hidden = "true":

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

La suppression de cet attribut était nécessaire ainsi que la requête jQuery ci-dessus:

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

Notez que j'ai essayé de changer les classes modales de modal fadeà modal fade in, et cela n'a pas fonctionné. De plus, changer les classes de modal fadeen a modal showempêché le modal de pouvoir être fermé.

Voici une solution [sans initialisation javascript!]

Je ne pouvais pas trouver un exemple sans initialiser votre modal avec javascript, $('#myModal').modal('show')donc voici une suggestion sur la façon de l'implémenter sans retard javascript au chargement de la page.

1. Modifiez votre div de conteneur modal avec classe et style:

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

2. Modifiez votre corps avec classe et style:

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

3. Ajouter une division de fond modal

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

4. Ajouter un script

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

   Ce qui se passera, c'est que le code HTML de votre modal sera chargé au chargement de la page sans aucun javascript, (sans délai). À ce stade, vous ne pouvez pas fermer le modal, c'est pourquoi nous avons le script document.ready, pour charger correctement le modal lorsque tout est chargé. Nous allons en fait supprimer le code personnalisé, puis initialiser le modal, (encore), avec le .modal ('show').

Vous pouvez activer le modal sans écrire de JavaScript simplement via des attributs de données.

L'option "show" définie sur true affiche le modal une fois initialisé:

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

Comme d'autres l'ont mentionné, créez votre modal avec display: block

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

Placez la toile de fond n'importe où sur votre page, elle n'a pas nécessairement besoin d'être en bas de la page

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

Ensuite, pour pouvoir refermer la boîte de dialogue, ajoutez ceci

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

J'espère que cela t'aides

Testé avec Bootstrap 3 et jQuery (2.2 et 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>

Vous pouvez l'afficher au démarrage même sans Javascript. Supprimez simplement la classe "hide".

class="Modal"

En plus des réponses de user2545728 et Reft, sans javascript mais avec lemodal-backdrop in

3 choses à ajouter

1. un div avec les classes modal-backdrop inavant la classe .modal
2. style="display:block;" à la classe .modal
3. fade in avec la classe .modal

Exemple

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

Mise à jour 2020 - Bootstrap 4

Le balisage modal a légèrement changé pour Bootstrap 4. Voici comment vous pouvez ouvrir le modal au chargement de la page, et éventuellement retarder l'affichage du 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>

Démo sur Codeply

Dans bootstrap 3, il vous suffit d'initialiser le modal via js et si au moment du chargement de la page, le balisage modal est dans la page, le modal apparaîtra.

Dans le cas où vous souhaitez empêcher cela, utilisez l'option show: falseoù vous initialisez le modal. Quelque chose comme ça: $('.modal').modal({ show: false })

Vous voudrez peut-être conserver jquery.jsdifféré pour un chargement de page plus rapide. Cependant, s'il jquery.jsest différé, il $(window).loadpeut ne pas fonctionner. Ensuite, vous pouvez essayer

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

il affichera votre modal une fois la page complètement chargée (y compris jquery)

Pour éviter que le bootstrap ne soit annulé et perdre sa fonctionnalité, il suffit de créer un bouton de lancement normal, de lui fournir un identifiant et de «cliquer dessus» en utilisant jquery, comme ceci: Le bouton de lancement:

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

Le déclencheur jQuery:

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

J'espère que ça aide. À votre santé!

Exemple simple Faire un chargeur spinner d'un 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>