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
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",
utilisez directement le code $('#myModal').modal(options)
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.
-
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">×</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 <div class="modal fade" id="myModal".............>