web-dev-qa-db-fra.com

Bootstrap ouverture modale au chargement de la page

J'ai une page avec un bootstrap modal dessus (manuel: http://getbootstrap.com/javascript/#modals ).

J'aimerais que ce modal soit ouvert au chargement de la page. Mais cela ne se produit pas.

<!-- Modal -->
<div class="modal fade" id="memberModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="memberModalLabel">Thank you for signing in!</h4>
      </div>
      <div class="modal-body">
        <p>However the account provided is not known.<BR>
        If you just got invited to the group, please wait for a day to have the database synchronized.</p>

        <p>You will now be shown the Demo site.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
<!--
$('#memberModal').modal('show');
//-->
</script>

Maintenant, si j'ajoute un bouton au code. Le modal s'ouvre lorsque j'appuie sur le bouton.

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#memberModal">
  Launch modal
</button>

J'ai essayé plusieurs choses, mais je n'arrive pas à faire fonctionner le modal qui s'ouvre au chargement de la page. J'ai à la fois le js et le css de bootstrap appelé dans la tête html.

<!-- Bootstrap - Latest compiled and minified CSS -->
<link rel="stylesheet" type='text/css' href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Bootstrap - Latest compiled and minified JavaScript -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Qu'est-ce que je fais mal?

twitter-bootstrapmodal-dialogbootstrap-modal
9
Paul

J'ai trouvé le problème. Ce code a été placé dans un fichier séparé qui a été ajouté avec une fonction php include (). Et cette inclusion se produisait avant le chargement des fichiers Bootstrap. Le fichier Bootstrap JS n'était donc pas encore chargé, ce modal ne faisant rien).

Avec l'exemple de code ci-dessus n'a rien de mal et fonctionne comme prévu lorsqu'il est placé dans la partie corps d'une page html.

<script type="text/javascript">
$('#memberModal').modal('show');
</script>
8
Paul

Utilisez un événement document.ready() autour de votre appel.

$(document).ready(function () {

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

});

jsFiddle mis à jour - http://jsfiddle.net/uvnggL8w/1/

25
haxtbh