web-dev-qa-db-fra.com

Charger Bootstrap modal au chargement de la page sans bouton de tir ou en utilisant jQuery

J'essaie de lancer un Bootstrap modal au chargement de la page sans tirer un bouton HTML ou utiliser jQuery.

Voici mon code:

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

<div id="my-modal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Title</h4>
            </div>
            <div class="modal-body">
                Hello World!
            </div>
        </div>
    </div> 
</div>

Cela fonctionne lorsque vous appelez

$('#my-modal').modal('show');

Mais je ne veux pas appeler une méthode ou tirer un bouton. Existe-t-il un moyen de lancer le modal automatiquement au chargement de la page?

Démo: Fiddle

twitter-bootstrapbootstrap-modal
17
Sai Kiran Sripada

Créez une classe CSS pour .modal et ajouter display:block. Donnez également la classe in à div modale.

Démo de travail

CSS

.modal {
  display:block;
}

HTML

<div id="my-modal" class="modal fade in">

Edit: D'une manière ou d'une autre, la fonction de fermeture par défaut ne fonctionnera pas, vous devrez ajouter un script personnalisé pour cela.

23
Surjith S M

Vous pouvez utiliser la fonction de chargement de la page

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

<body onLoad="$('#my-modal').modal('show');">
    <div id="my-modal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Title</h4>
                </div>
                <div class="modal-body">
                    Hello World!
                </div>
            </div>
        </div> 
    </div>
</body>
2
TwixtedChaox

J'ai passé un certain temps à essayer de s'adapter à cela et j'ai constaté que cela fonctionnait bien pour mes besoins, qui comprenait une seule page de connexion ... Évidemment, ce n'est pas l'article fini, mais une excellente base à partir de laquelle j'ai pu commencer. J'espère que cela peut être utile à quelqu'un ...

<body style="background: #555;">
    <!-- Modal -->
    <div class="modal-dialog" style="margin-top: 20%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>One fine body…</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div>
</body>
1
Blackslaine

On Bootstrap 4 -

Ajoutez la classe show à votre modal

<div class="modal fade show" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

et suivant css -

.modal {
    display:block;
  }
1
charsi