utilisation de la boîte modale bootstrap

Boîte modale de bootstrap

Si vous souhaitez simplement utiliser la fonction de boîte modale seule, vous pouvez introduire modal.js séparément et le CSS de bootstrap, dans bootstrap Dans le package, bootstrap.js peut être introduit.

Utilisation

1. Grâce à l'attribut data, par exemple, définissez le data-toggle='"modal" d'un bouton, et définissez le data-target= Contenu du sélecteur "#myModal",

2. utilisez directement le code $('#myModal').modal(options)

3. via js La boîte modale est principalement composée de trois parties, model-head, modal-body et model-footer. Le contenu principal est affiché dans le corps Class="close" est un style de boîte modale fermée.

4. Quelques méthodes courantes $('#identifier').modal('toggle') changent l'état de la boîte modale

   $('#identifier modal'). ("show") Afficher la boîte modale

   $('#identifier').modal('hide') Masquer la boîte modale

Utiliser deux étapes

1. Importez les trois fichiers suivants dans l'ordre

2 Copiez le code suivant dans la page

开始演示模态框 
 
 
 
 × 
标题是什么
 
 
 写你HTML文本 
 
 取消 保存添加 
 
 
 

Pour faire simple. , la boîte modale a besoin d'un déclencheur. Ajoutez les attributs suivants à l'élément html qui déclenche la boîte modaledata-toggle="modal" data-target="#myModal"

Si vous observez ce qui suit, vous constaterez que myModal dans cedata-target="#myModal"est le div. où se trouve la boîte modale id