Auparavant, nous avons expliqué l'utilisation de l'onglet bootstrap. Aujourd'hui, nous apprendrons l'utilisation des fenêtres pop-up de modèle dans Bootstrap.
Effet:
Code:
<input id = "btntex Data-Dismiss = "MODAL"> × </ Button> <H3 ID = "MyModallabel"> En-tête modal </H3> </div> <div> </div>
C'est très simple, c'est tout.
Remarque: La propriété Data-cible pointe vers l'ID du modèle, alors cliquez sur le bouton et le modèle apparaîtra.
Bien sûr, vous pouvez également utiliser JS pour le contrôler.
Le code suivant:
Show: $ ('# mymodal'). Modal ('show');
Hide: $ ('# myModal'). Modal ('Hide');
Switch: $ ('# mymodal'). Modal ('Toogle');
Événement: $ ('# mymodal'). Sur ('Hidden', function () {// faire quelque chose…});
Remarque: J'ai utilisé l'attribut HREF ici, qui est de laisser le modèle à télévoir une URL. Bien sûr, vous pouvez écrire ce que vous voulez directement dans le corps modèle.
Si vous regardez attentivement la structure DIV du modèle, vous comprendrez que le modèle de modèle représente le contenu et que la tête de modèle est l'en-tête. Donc, si vous souhaitez ajouter deux boutons en bas, vous devez utiliser le code suivant.
<v> <a href = "#"> Close </a> <a href = "#"> Enregistrer </a> </div>
Remarque: Si vous souhaitez définir la largeur du modèle, vous devez ajouter la mise en page. Il s'agit de placer le modèle dans le bloc de code ci-dessous et de définir la largeur du modèle. style = "width: 500px". Soit dit en passant, vous ne pouvez pas simplement le mettre dans la classe en utilisant le style de portée. .
<div> </div>
Ce qui précède est l'utilisation de la boîte pop-up du modèle bootstrap qui vous a présenté par l'éditeur. J'espère que ce sera utile à tous!