Comment créer les en-têtes de navigation fixes et réactive en utilisant le composant navbar de Bootstrap.
Les Modals sont essentiellement des boîtes de dialogue qui sont utilisée pour fournir des informations importantes à l'utilisateur ou ... Vous pouvez facilement créer des boîtes de dialogue
Les Modals sont essentiellement des boîtes de dialogue qui sont utilisée pour fournir des informations importantes à l'utilisateur ou l’inviter à prendre les mesures nécessaires avant de passer ou d’exécuter une tache.
Les fenêtres modales sont largement utilisés pour avertir les utilisateurs pour des situations comme la session qui expire ou pour recevoir leur confirmation définitive avant d'effectuer une action critique comme par exemple enregistrer ou supprimer des données importantes.
Vous pouvez facilement créer des boîtes de dialogue très intelligentes et flexible avec le plugin modal Bootstrap.
L'exemple suivant vous montrera comment créer un simple modal avec l’en-tête, le corps du message et les pieds de page et contenant des boutons d'action pour l'utilisateur.
Code : HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple de Modals Bootstrap 3 </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#monModal").modal('show');
});
</script>
</head>
<body>
<div id="monModal" 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">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Voulez-vous enregistrer les modifications apportées au document avant de fermer?</p>
<p class="text-warning"><small>Si vous ne sauvegardez pas, vos modifications seront perdues.</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
<button type="button" class="btn btn-primary">Sauvegarder</button>
</div>
</div>
</div>
</div>
</body>
</html>
L'exemple ci-dessus lance la fenêtre modale lorsque la page est entièrement chargée via JavaScript.
Vous pouvez activer une boite modale Bootstrap en cliquant sur le bouton ou lien via les attributs de données sans écrire de code JavaScript. Voir l'exemple suivant :
Code : HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Exemple les Modals Bootstrap 3 </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.exemple{
margin: 20px;
}
</style>
</head>
<body>
<div class="exemple">
<!-- Button HTML (to Trigger Modal) -->
<a href="#monModal" class="btn btn-lg btn-primary" data-toggle="modal">Lancer la Modal</a>
<!-- Modal HTML -->
<div id="monModal" 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">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Voulez-vous enregistrer les modifications apportées au document avant de fermer?</p>
<p class="text-warning"><small>Si vous ne sauvegardez pas, vos modifications seront perdues.</small></p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Fermer</button>
<button class="btn btn-primary">Sauvegarder</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Pour activer une boite modale Bootstrap via des attributs de données nous avons essentiellement besoin de deux composantes — l'élément contrôleur comme un bouton ou un lien et l'élément modal lui-même.
Le conteneur dans un document doit avoir un identifiant unique (dans ce cas id="monModal"), de sorte qu'il puisse être ciblé par data-target (pour les boutons) ou l’attribut href (pour les liens hypertexte) de l'élément contrôleur.
L'attribut data-toggle="modal" est requis pour ajouter l'élément contrôleur, comme un bouton ou une ancre, avec un attribut data-target="#monModal" ou href="#monModal" pour cibler un modales spécifiques pour activer/désactiver.
La classe .modal-dialog définit la largeur, mais aussi les alignements verticaux et horizontaux de la boîte modale. Alors que la classe .modal-content définit les styles comme texte et couleur d'arrière-plan, bordures, bords arrondis etc. …
Reste les choses évidentes, comme l'élément .modal-header qui définit un en-tête pour le modal qui contient généralement un titre modal et un bouton de fermeture, l'élément .modal-body qui contient le contenu comme les textes, images, formulaires, etc. et l'élément .modal-footer qui définit le pied de page, il contient généralement des boutons d'action pour l'utilisateur.
Une fenêtre modale Bootstrap peut être activée par un script JavaScript, il suffit d'appeler la méthode du Bootstrap modal() avec le "id" ou la "class" Sélecteur de votre modal dans votre code JavaScript.
Code : HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Exemple Modals de Bootstrap 3 </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn").click(function(){
$("#monModal").modal('show');
});
});
</script>
<style type="text/css">
.exemple{
margin: 20px;
}
</style>
</head>
<body>
<div class="exemple">
<!-- Boutton HTML -->
<a href="#" class="btn btn-lg btn-primary">Lancer la modale</a>
<!-- Modale HTML -->
<div id="monModal" 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">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Voulez-vous enregistrer les modifications apportées au document avant de fermer?</p>
<p class="text-warning"><small>Si vous ne sauvegardez pas, vos modifications seront perdues.</small></p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Fermer</button>
<button class="btn btn-primary">Sauvegarder</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Bootstrap vous permet de changer l'échelle d'une boite de dialogue modale en augmentant ou en diminuant la largeur. Il suffit d’ajouter à la classe .modal-dialog la classe .modal-lg pour avoir une boite large ou la classe .modal-sm pour avoir une boite moins large.
Voici le code pour une boite modale moins large :
Code : HTML
<!-- Boutton HTML --> <a href="#" class="btn btn-lg btn-primary">Lancer la modale</a> <!—Modale étroite HTML --> <div id="monModal" class="modal fade"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Confirmation</h4> </div> <div class="modal-body"> <p>Voulez-vous enregistrer les modifications apportées au document avant de fermer?</p> <p class="text-warning"><small>Si vous ne sauvegardez pas, vos modifications seront perdues.</small></p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal">Fermer</button> <button class="btn btn-primary">Sauvegarder</button> </div> </div> </div> </div>
Certaines options peuvent être passées à la méthode modal() de Bootstrap pour personnaliser les fonctionnalités d'une fenêtre modale.
| Nom | Type | Valeur par défaut | Description |
|---|---|---|---|
| backdrop | Boolean ou 'static' |
true | Inclut un élément modal-toile de fond (région de charbonné). Alternativement, vous pouvez spécifier static pour un décor qui ne ferme pas le modal au clic. |
| keyboard | Boolean | true | Ferme la fenêtre modale par la touche Echap. |
| show | Boolean | true | Affiche ou active le modal lors de l'initialisation |
| remote | URL | faux | Si une url distante est fournie , son contenu sera chargée par la méthode load de jQuery et injecté dans la DIV qui a la classe ".modal-content". |
Vous pouvez définir ces options, soit par l'utilisation des données d'attributs ou de JavaScript. Pour définir les options de modal via des attributs de données, ajouter simplement data- au nom de l'option,
comme data-backdrop="static", data-keyboard="false" etc..
Toutefois, il est préférable d’utiliser JavaScript pour définir ces options, car il empêche de travail répétitif. Voir méthode .modal(options) ci-dessous pour savoir comment définir les options pour modal en utilisant le JavaScript.
Vous pouvez également utiliser l'attribut "href" pour fournir l'URL de la source distante, comme ceci :
Code : HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Exemple modale de Bootstrap 3 </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.exemple{
margin: 20px;
}
</style>
</head>
<body>
<div class="exemple">
<!-- Button HTML -->
<a href="teste.php" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#monModal">Lancer la modale</a>
<!-- Modal HTML -->
<div id="monModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- Ici le Contenu sera charger apartir du fichier source "teste.php" -->
</div>
</div>
</div>
</div>
</body>
</html>
Voici le code de la source distante « teste.php » :
Code : HTML
<?php echo ' <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Confirmation</h4> </div> <div class="modal-body"> <p>Le contenu de cette fenêtre modale a été chargé apartir d\'un fichier source distant..</p> <p class="text-warning"><small><strong>Remarque:</strong> Cette option est obsolète depuis la v3.3.0 et sera supprimée dans v4.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary">Sauvgarder les changements</button> </div>'; ?>
Voici les méthodes standard du modal de bootstrap :
Cette méthode active le contenu comme un modal. Il vous permet également de définir des options.
Le code de jQuery dans l'exemple suivant empêche le modal de se fermer lorsqu'un utilisateur clique sur la fenêtre de fond c'est-à-dire la zone noirci derrière le modal.
Code : HTML
<script type="text/javascript">
$(document).ready(function(){
$(".lancer-modal").click(function(){
$("#monModal").modal({
keyboard: false
});
});
});
</script>
Le code de jQuery dans l'exemple suivant crée un modal dans lequel le contenu de la modale sera inséré depuis un fichier distant lors de l'activation.
Code : HTML
<script type="text/javascript">
$(document).ready(function(){
$(".launch-modal").click(function(){
$("#monModal").modal({
remote: '../teste.php'
});
});
});
</script>
Cette méthode peut être utilisée pour ouvrir une fenêtre modale manuellement.
Code : HTML
<script type="text/javascript">
$(document).ready(function(){
$(".open-modal").click(function(){
$("#monModal").modal('show');
});
});
</script>