web-dev-qa-db-fra.com

Lancer Bootstrap Modal au chargement de la page

Je ne connais pas du tout javascript. La documentation de démarrage dit de 

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

Je ne sais pas comment appeler cela sur une page chargée. En utilisant le code fourni sur la page d’amorçage, je peux appeler le modal avec succès, mais je veux qu’il soit immédiatement chargé sur une page.

javascripthtml5twitter-bootstrap
180
Brandon

Emballez simplement le modal que vous voulez appeler lors du chargement de la page dans un événement jQuery load dans la section head de votre document.

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 de votre page en l'appelant avec un lien comme celui-ci:

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

Vous n'avez pas besoin de javascript pour afficher modal

Le moyen le plus simple est de remplacer "hide" par "in"

class="modal fade hide"

alors

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 un script jQuery:

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

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>

37
GAURAV MAHALE

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 peut être trouvé ici.

Pensez à avoir votre réponse complète.

16
Abrar Jahin

en ce qui concerne ce qu'Andre dit, 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

7
JPCS

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

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

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

Dans mon cas, ajouter jQuery pour afficher le modal ne fonctionnait pas:

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

Supprimer cet attribut était nécessaire ainsi que le 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é. En outre, le passage des classes de modal fade à modal show a empêché le modal de pouvoir être fermé.

5
Highly Irregular

Heres une solution [sans initialisation javascript!]

Je ne pouvais pas trouver d’exemple sans initialiser votre modal avec javascript, $('#myModal').modal('show'), voici donc une suggestion sur la manière de l’implémenter sans javascript delay on page load.

  1. Editez 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;">

  1. Modifiez votre corps avec classe et style:

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

  2. Ajouter modal-backdrop div

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

  3. 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 javascript, (sans délai). À ce stade, vous ne pouvez pas fermer le modal, c'est pourquoi nous avons le script document.ready pour le charger correctement lorsque tout est chargé. En fait, nous allons supprimer le code personnalisé, puis initialiser le modal (encore) avec le .modal ('show').

5
Reft
<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 le montrer au démarrage même sans Javascript. Supprimez simplement la classe "masquer".

class="Modal"
3
SPIELER

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/

3
Felipe Lima

Dans le bootstrap 3, vous devez simplement initialiser le modal via js et si au moment du chargement de la page, le balisage modal est dans la page, le modal sera affiché.

Si vous souhaitez éviter cela, utilisez l'option show: false où vous initialisez le modal. Quelque chose comme ça: $('.modal').modal({ show: false })

2
Stafie Anatolie

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

3 choses à ajouter

  1. un div avec les classes modal-backdrop in avant 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>
2
RafaSashi

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 le fond n'importe où sur votre page, il n'est pas nécessaire qu'il soit au 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

1
jBelanger

Mise à jour 2018 - Bootstrap 4

Le balisage modal a légèrement changé pour Bootstrap 4. Voici comment vous pouvez ouvrir le chargement modal au chargement de la page, et éventuellement retarder l'affichage de la modale ...

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

1
Zim

Exemple simple Créer 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>
0
ankush

Si vous voulez afficher modal alors que la page est encore chargée,

Appel _ {$("modal_selector").modal("show") inside $("document").ready() fonction,

et Fermer il y a à $(window).on("load") événement!



Why?Voir: https://stackoverflow.com/a/3698214/9438347

0
Squidward Tentacles