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 dans Bootstrap et 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 Modal est 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 Bootstrap est 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 :

<a href="#" class="btn btn-lg btn-success" 
   data-toggle="modal" 
   data-target="#basicModal">Click to open Modal</a>

Notez que l'élément de lien possède deux attributs de données personnalisés : data-toggle et data-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”的模态框。

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

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <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" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <h3>Modal Body</h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
  </div>
</div>

模态框的父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()

Regardons maintenant le code requis pour définir le modal :

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

Le div parent du modal doit avoir le même identifiant que celui utilisé dans l'élément déclencheur ci-dessus. Dans notre cas, c'est id="basicModal".

Remarque : Les attributs personnalisés aria-labelledby et aria-hidden dans l'élément modal parent le rendent accessible. C'est une bonne pratique de rendre votre site Web accessible à tous, vous devez donc utiliser ces attributs car ils n'affecteront pas négativement la fonctionnalité normale du modal. 🎜🎜Dans le code HTML de la boîte modale, nous pouvons voir un div wrapper imbriqué dans le div de la boîte modale parent. La classe modal-content de ce div indique à bootstrap.js où rechercher le contenu du modal. À l’intérieur de ce div, nous devons placer les trois parties mentionnées précédemment : l’en-tête, le corps et le pied de page. 🎜🎜L'en-tête de la boîte modale, comme son nom l'indique, est utilisé pour ajouter un titre ou d'autres éléments tels qu'un bouton de fermeture "x" au modal. Ces éléments doivent également avoir un attribut data-dismiss qui indique à Bootstrap quel élément masquer. 🎜🎜Jetons ensuite un œil au corps de la boîte modale. Considérez-le comme un canevas ouvert dans lequel vous pouvez ajouter tout type de données, y compris des vidéos YouTube intégrées, des images ou tout autre contenu. 🎜🎜Enfin, jetons un œil au pied de page du modal. Cette zone est alignée à droite par défaut. Dans cette zone, vous pouvez placer des boutons d'opération tels que "Enregistrer", "Fermer", "Accepter", etc. Ces boutons sont associés au comportement que la "boîte modale" doit afficher. 🎜🎜Changez la taille de la boîte modale🎜🎜J'ai déjà mentionné que les boîtes modales Bootstrap sont réactives et flexibles. Nous verrons comment changer sa taille dans cette section. 🎜🎜La boîte modale de Bootstrap 3.3.7 a deux nouveaux styles : grand et petit. Ajoutez une classe de modificateur modal-lg au div modal-dialogdiv pour obtenir une boîte modale plus grande, et ajoutez modal-sm pour obtenir une plus grande boîte modale. Un modal plus petit. 🎜🎜Utilisez jQuery pour activer la boîte modale🎜🎜La boîte modale est un plug-in jQuery, donc si vous souhaitez utiliser jQuery pour contrôler la boîte modale, vous devez appeler .modal() sur le sélecteur de la boîte modale.code>méthode. Par exemple : 🎜<pre class="brush:js;toolbar:false;">var options = { &quot;backdrop&quot; : &quot;static&quot; }</pre>🎜Les "options" ici sont des objets JavaScript qui peuvent être transmis à des comportements personnalisés. Par exemple : 🎜<pre class="brush:js;toolbar:false;">$(&amp;#39;#basicModal&amp;#39;).on(&amp;#39;shown.bs.modal&amp;#39;, function (e) { alert(&amp;#39;Modal is successfully shown!&amp;#39;); });</pre>🎜Les options disponibles incluent : 🎜<ul> <li> <strong>backdrop</strong>：这可以是<code>true或static。这定义你是否希望用户能够通过单击背景来关闭模态。

keyboard：如果设置为true则模态框将通过ESC键关闭。

show：用于打开和关闭模态框。它可以是true或false。

remote：这是最炫酷的选择之一。它可以用于使用jQuery的load()方法加载远程内容。你需要在此选项中指定外部页面。默认设置为false。

Bootstrap模态框的事件

你可以通过使用在打开和关闭模态框时触发的各种事件来进一步自定义Bootstrap模态的普通行为。这些事件必须使用jQuery的.on()方法绑定。

可用的事件有：

• show.bs.modal：在模态框打开之前被触发。
• shown.bs.modal：在显示模态框后触发。
• hide.bs.modal：在模态框被隐藏之前触发。
• hidden.bs.modal：在模态关闭后触发。
• loaded.bs.modal：使用上述的remote选项在远程内容成功加载到模态框的内容区域时触发。

你可以像这样使用上述之一的事件：

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

在模态框中加载远程内容

在Bootstrap模式中加载远程内容有三种不同的方法。

第一种方法，如上所述,是使用对象options中的remote选项。其他两种方式都是没有JavaScript的，如下所示。

你可以为模态框的触发元素中的href属性提供一个值。在我们的例子中，触发器是一个链接。例如，我们可以不使用我们之前提到的值#而将URL包含在特定页面中：

<a class="btn btn-lg btn-default" 
   data-toggle="modal" 
   data-target="#largeModal" 
   href="remote-page.html">Click to open Modal</a>

你还可以为触发元素提供data-remote的自定义数据属性，而不是使用href属性。例如：

<a class="btn btn-lg btn-default" data-toggle="modal" 
   data-target="#largeModal" 
   data-remote="remote-page.html">Click to open Modal</a>

结论

模态框是Bootstrap 3提供的最好的插件之一。对于初级设计师来说，它是不需要任何JavaScript代码而在弹出式画面中加载内容的最佳方式之一。

更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!