Maison > interface Web > Tutoriel d'amorçage > le corps du texte

utilisation de la boîte modale bootstrap

藏色散人
Libérer: 2023-02-13 11:12:44
original
5217 Les gens l'ont consulté

Utilisation de la boîte modale bootstrap : 1. Via l'attribut data, définissez le contenu du sélecteur "data-target="#myModal"" en même temps ; 2. Via js, utilisez directement le code "$( '#myModal' ).modal(options)" etc.

utilisation de la boîte modale bootstrap

L'environnement d'exploitation de cet article : système Windows 7, bootstrap3, ordinateur Dell G3.

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

事件 作用 用法
show.bs.modal 在调用 show 方法后触发。 $(’#myModal’).on(‘show.bs.modal’,function () {alert(“显示模态框”);});
shown.bs.modal 在调用 show 方法后触发。 $(’#myModal’).on(‘shown.bs.modal’, function () {alert(“完全显示模态框”); });
hide.bs.modal 在调用 hide  方法后触发。 $(’#myModal’).on(‘hide.bs.modal’, function () {alert(“隐藏模态框”);});
hidden.bs.modal 在调用 hide  方法后触发。 $(’#myModal’).on(‘hidden.bs.modal’, function () {alert(“完全隐藏模态框”); });

Utiliser deux étapes

1. Importez les trois fichiers suivants dans l'ordre

<link rel="stylesheet" href="../css/bootstrap.min.css">
<script sype="text/JavaScript" src="./jquery.min.js"></script>
<script sype="text/JavaScript" src="../js/bootstrap.min.js"></script>
Copier après la connexion

2 Copiez le code suivant dans la page

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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 text-center" id="myModalLabel">标题是什么</h4>
            </div>
            <div class="modal-body">
                写你HTML文本
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">保存添加</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
Copier après la connexion

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 modale data-toggle="modal" data-target="#myModal"

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

(Recommandé : "tutoriel 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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal