oujood.com

Bootstrap Boites de dialogue Modals

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.

chercher |

Création des boites Modals avec bootstrap

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


  Copier le code 

	<!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">&times;</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.

Activer Les Modals par des attributs de données

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


  Copier le code 

<!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">&times;</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.

Activer Les Modals par JavaScript

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


  Copier le code 

<!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">&times;</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>

Changer les tailles de la boite de dialogue Modale

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


  Copier le code 

<!-- 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">&times;</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>

Options

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


  Copier le code 

<!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


  Copier le code 

<?php
echo ' <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</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>';
?>

Les Méthodes

Voici les méthodes standard du modal de bootstrap :

.modal(options)

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


  Copier le code 

<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


  Copier le code 

<script type="text/javascript">
$(document).ready(function(){
    $(".launch-modal").click(function(){
        $("#monModal").modal({
            remote: '../teste.php'
        });
    });
});
</script>

.modal('show')

Cette méthode peut être utilisée pour ouvrir une fenêtre modale manuellement.

Code : HTML


  Copier le code 

<script type="text/javascript">
$(document).ready(function(){
    $(".open-modal").click(function(){
        $("#monModal").modal('show');
    });
});
</script>

chapitre précédent

Par carabde 25 decembre 2015

MARKETPOWER-IA
Logiciel d'I.A.
Logiciel d'I.A. 100% Français pour lancer son business en ligne

La méthode secrète likes sans fin sur Facebook

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE

Consulter


1tpe