Une brève analyse de l'utilisation des boîtes modales dans l'apprentissage Bootstrap

Cet article vous fera découvrir la boîte modale dansBootstrapet vous présentera comment modifier la taille de la boîte modale et charger du contenu distant dans la boîte modale. J'espère que cela sera utile à tout le monde !

Dans ce tutoriel, nous discuterons du très utile plugin Bootstrap jQuery -Modal Box.

Bootstrap Modalest une fenêtre contextuelle JavaScript légère et polyvalente, personnalisable et réactive. Vous pouvez l'utiliser pour afficher des fenêtres d'avertissement, des vidéos et des images sur votre site Web. Les sites Web créés avec Bootstrap peuvent utiliser des modaux pour afficher les termes et conditions (dans le cadre du processus d'inscription), des vidéos et même des widgets de réseaux sociaux.

Afin de mieux le comprendre, jetons un œil aux différents composants de la boîte modale Bootstrap. [Recommandation associée : "Tutoriel bootstrap"]

La boîte modale Bootstrapest principalement divisée en trois parties : en-tête, corps et pied de page. Chaque partie a sa propre signification, nous devons donc les utiliser correctement. Nous en discuterons plus tard. Quelle est la chose la plus excitante à propos des modaux Bootstrap ? Vous n'avez pas besoin d'écrire de code JavaScript pour l'utiliser ! Tous les codes et styles sont prédéfinis par Bootstrap. Tout ce que vous avez à faire est d’utiliser les bonnes balises et attributs pour le déclencher.

La boîte modale par défaut

La boîte modale par défaut ressemble à ceci :

Pour déclencher la boîte modale, vous devez ajouter un lien ou un bouton. La balise qui déclenche l'élément peut ressembler à ceci :

Click to open Modal

Notez que l'élément de lien possède deux attributs de données personnalisés :data-toggleetdata-target. La bascule indique à Bootstrap quoi faire et la cible indique à Bootstrap quel élément ouvrir. Ainsi, chaque fois que vous cliquez sur un tel lien, une boîte modale avec l'identifiant "basicModal" apparaîtra.data-toggle和data-target。toggle告诉Bootstrap要做什么，target告诉Bootstrap要打开哪个元素。所以每当点击这样的链接时，都会出现一个id为“basicModal”的模态框。

现在让我们看看定义模态框所需的代码：

 
 
 
 × 
Modal title
 
 
 
Modal Body
 
 
 Close Save changes 
 
 
 

模态框的父div应具有与上述触发元素中使用的相同的ID。在我们的例子中是id="basicModal"。

注意：父模态框元素中自定义属性aria-labelledby和aria-hidden让其可被访问。让所有人都能访问你的网站是一个很好的做法，所以你应该使用这些属性，因为它们不会对模态框的普通功能产生负面影响。

在模态框的HTML代码中，我们可以看到一个封装div嵌套在父模态框div内。这个div的类modal-content告诉bootstrap.js在哪里查找模态框的内容。在这个div内，我们需要放置前面提到的三个部分：头部，正文和页脚。

模态框头部，顾名思义，用于给模态添加一个标题或者如“x”关闭按钮等其他元素。这些元素还应该有一个data-dismiss属性告诉Bootstrap哪个元素要隐藏。

然后我们看一下模态框的正文。可以把它看做一个打开的画布，你可以在其中添加任何类型的数据，包括嵌入YouTube视频，图像或者任何其他内容。

最后，我们看一下模态框的页脚。该区域默认为右对齐。在这个区域，你可以放置“保存”，“关闭”，“接受”等操作按钮，这些按钮与“模态框”需要表现的行为相关联。

改变模态框的大小

之前我提到Bootstrap模态框是响应式的、灵活的。我们将在本节中看到如何更改其大小。

Bootstrap 3.3.7中模态框有两种新的风格：大和小。给divmodal-dialogdiv添加一个修饰符类modal-lg可以获得一个更大的模态框，添加modal-sm可以获得一个更小的模态框。

使用jQuery激活模态框

模态框是一个jQuery插件，所以如果你想使用jQuery控制模态框的话，你需要在模态框的选择器上调用.modal()

$('#basicModal').modal(options);

var options = { "backdrop" : "static" }

$('#basicModal').on('shown.bs.modal', function (e) { alert('Modal is successfully shown!'); });