utilisation de la boîte modale bootstrap

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.

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>

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>

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 66cacf8a432b8feb3b3955bbd2e98abf

(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!