bootstrap 模態框用法-Bootstrap教程-PHP中文網

bootstrap 模態框用法

藏色散人

發布： 2023-02-13 11:12:44

原創

5205 人瀏覽過

bootstrap的模數框

如果只想單獨使用模態框功能，可以單獨引入modal.js，和bootstrap的css,在bootstrap的包中，可引入bootstrap.js。

用法

透過data屬性，例如設定某個butto的data-toggle='“modal”，同時設定data-target= "#myModal" 選擇器內容，
透過js直接用程式碼$('#myModal').modal(options)
模態框主要為三個部分，model-head,modeal-body,model-footer,主要內容在body中顯示，class="close"為一個關閉模態框樣式。
幾個常用的方法$('#identifier').modal('toggle') 切換模式框狀態

$('#identifier'). modal('show') 顯示模態方塊

$('#identifier').modal('hide') 隱藏模態方塊

##事件



作用	用法
#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(“完全隱藏模態框”); });

#使用步驟兩步驟

<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> </div> </div>