Dans cette leçon, nous découvrirons principalement le plug-in de boîte modale dans Bootstrap, qui est un plug-in de fonction pop-up très courante pour les sites Web interactifs.
Pour plus d'informations sur le plug-in Bootstrap Modal Box, veuillez cliquer sur le sujet spécial "Bootstrap Modal Use Tutorial" pour apprendre. J'espère que vous l'aimez, alors continuez ci-dessous
un. Utilisation de base
Les composants contextuels utilisant des boîtes modales nécessitent trois couches d'éléments de conteneur Div, à savoir modal (couche de déclaration modale),
Dialogue (couche de déclaration de fenêtre), contenu (couche de contenu). Dans la couche de contenu, il y a trois couches, à savoir l'en-tête, le corps et le pied de page.
// Exemple de base
<! - Déclaration modale, l'affichage indique l'affichage -> <div tabindex = "- 1"> <! - Déclaration de fenêtre -> <v> <! - Déclaration de contenu -> <v> <! - En-tête -> <v> <Button Type = "Button" Data-Dismiss = "Modal"> <span> × </pan> Le membre ne peut pas se connecter temporairement au membre </p> </ div> <! - FootNote -> <div> <Button Type = "Button"> Registre </ Button> <Button Type = "Button"> Connectez-vous </ Button> </ Div> </div> </div> </div> </div> </div> </div> </div>
Si vous souhaitez que la boîte modale soit automatiquement masquée, puis apparaissez en cliquant sur le bouton, vous devez effectuer les opérations suivantes.
// Supprimez l'affichage dans la boîte modale et ajoutez un ID <div id = "mymodal"> // cliquez pour déclencher la boîte modale pour afficher <bouton data-toggle = "modal" data-target = "# mymodal"> cliquez sur la fenêtre pop-up </utton> // il y a trois tailles de fenêtres pop-up, qui sont normales par défaut, et il y a des lg (grande) et SM (small) <div> <div> id = "myModal"> // Utilisez du fluide dans le système de grille dans la partie du corps principal <! - corps principal -> <div> <div> <v> <div> 1 </div> <div> 1 </div> <Div> 1 </v> </v> </div> </div> </div> </div> </div> </div> </div> </div>
deux. Instructions d'utilisation
Après l'introduction de l'utilisation de base, jetons un coup d'œil aux différentes utilisations importantes du plug-in. Tous les plug-ins sont basés sur JavaScript / jQuery. Ensuite, il y a quatre éléments: utilisation, paramètres, méthodes et événements.
1. Utilisation
Le premier type: peut être passé par l'attribut de données
// data-toggledata-toggle = "modal" data-target = "# mymodal"
Data-Toggle indique le type de déclenchement
Le cible des données indique le nœud déclenché
Si vous n'utilisez pas <button>, mais <a>, où les données peuvent également utiliser href = "# mymodal"
remplacer. Bien sûr, nous vous recommandons d'utiliser le cible des données. En plus des deux attributs déclarés, des données-toggle et du cible des données, certaines options sont disponibles.
2. Paramètres
Les effets peuvent être contrôlés en définissant la déclaration d'attribut Data- * sur l'élément HTML.
// Arrière-plan blanc et cliquez pour ne pas fermer Data-BackDrop = "false" // Appuyez sur ESC pour ne pas fermer Data-KeyBoard = "false" // Initialiser Hidden. Si le clic du bouton est déclenché, le premier clic ne sera pas affiché et la deuxième fois qu'il s'affiche. data-show = "false" // charge index.html une fois dans le conteneur href = "index.html"
Bien sûr, il peut également être défini directement dans JavaScript.
// déclare $ ('# mymodal') via jQuery.modal ({show: true, backdrop: false, clavier: false, distant: 'index.html',});3. Méthode
Si les fenêtres contextuelles ne sont pas affichées par défaut, comment puis-je cliquer sur des fenêtres contextuelles avant et après?
// Cliquez pour afficher la fenêtre pop-up $ ('# btn'). Sur ('cliquez', fonction () {$ ('# myModal'). Modal ('show');});4. Événements
La boîte modale prend en charge 4 types de temps, correspondant à la fenêtre contextuelle avant, après la fenêtre contextuelle, avant la fermeture et après la fermeture.
$ ('# mymodal'). on ('show.bs.modal', function () {alert ('gratuit immédiatement lorsque la méthode show est appelée!');}); $ ('# mymodal'). On ('montré.bs.modal', fonction () {alert ('gratuit immédiatement lorsque la boîte modale est affiché! ');}); $ (' # mymodal '). on (' hide.bs.modal ', function () {alert (' libre immédiatement lorsque la méthode de masquer est appelée! affiché! ');}); $ (' # mymodal '). on (' chargé.bs.modal ', function () {alert (' libre après le chargement des données distantes! ');});Cette série de didacticiels a été compilée dans: Bootstrap Basic Tutorials Touss spéciaux, bienvenue pour cliquer pour apprendre.
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.