Charger le bootstrap modal sur le chargement de la page sans le bouton de tir ou en utilisant jQuery

Je suis en train de lancer un Bootstrap modal au chargement de la page, sans tirer un bouton en HTML ou en utilisant 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 d'incendie d'un bouton. Est-il un moyen de lancer modal automatiquement au chargement de la page?

Démo: Violon

source d'informationauteur Sai Kiran Sripada

  1. 20

    Créer une classe CSS pour .modal et ajouter display:block. Aussi donner in classe modale div.

    Travail De Démonstration

    CSS

    .modal {
  display:block;
}

    HTML

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

    Edit: en Quelque sorte par défaut de fermeture ne fonctionne pas, vous devrez ajouter un script personnalisé pour que.

  2. 5

    Vous pourriez utiliser la page onload fonction

    <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>
  3. 2

    J'ai passé du temps à essayer de le faire et constaté que ça marchait bien pour mes besoins, qui a incorporé une seule page de connexion... Évidemment, ce n'est pas l'objet fini, mais une excellente base à partir de laquelle j'ai été en mesure de commencer avec. J'espère que c'est 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>
  4. 0

    Sur Bootstrap 4 --

    Ajouter la classe d'exposition à votre modal

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

    et suivants du css -- 

    .modal {
  display:block;
}
  5. -2
    <div id="modal1" class="modal" data-show role="dialog">

    données montrent vous aider à