Lancer la modale Bootstrap au chargement de la page

Question

Je ne connais pas du tout JavaScript. La documentation de Bootstrap dit de

Appelez la modale via JavaScript : $('#myModal').modal(options)

Je n'ai aucune idée de la façon dont on peut appeler cela lors du chargement d'une page. En utilisant le code fourni sur la page Bootstrap, je peux appeler la modale en cas de clic sur un élément, mais je veux qu'elle se charge immédiatement lors du chargement d'une page.

Answer 1

Il suffit d'intégrer la modale que vous souhaitez appeler au chargement de la page dans un fichier jQuery load sur la section d'en-tête de votre document et il devrait s'afficher, comme suit :

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 la modale à l'intérieur de votre page en l'appelant avec un lien comme ceci :

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

Answer 2

Vous n'avez pas besoin javascript pour montrer la modalité

Le plus simple est de remplacer "hide" par "in".

class="modal fade hide"

donc

class="modal fade in"

et vous devez ajouter onclick = "$('.modal').hide()" à la fermeture du bouton ;

PS : Je pense que le meilleur moyen est d'ajouter jQuery script :

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

Answer 3

Il suffit d'ajouter 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>

Answer 4

Concernant ce que dit Andre's Ilich, vous devez ajouter le js script 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 cela vous aidera.

Answer 5

<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. Il suffit de supprimer la classe "hide".

class="Modal"