任務(wù)1：模態(tài)框項目七Js組件主講人：趙丙秀武漢軟件工程職業(yè)學(xué)院CONTENTS0102模態(tài)框的結(jié)構(gòu)模態(tài)框的調(diào)用03模態(tài)框的大小課程導(dǎo)入模態(tài)框主要用于顯示用戶與頁面交互的內(nèi)容，典型的應(yīng)用場景為登錄注冊、操作提示、用戶說明。模態(tài)框的結(jié)構(gòu)/01模態(tài)框的結(jié)構(gòu)模態(tài)框的結(jié)構(gòu)模態(tài)框的結(jié)構(gòu)class="modal-content"第三層容器，控制模態(tài)框的邊框、邊距、背景、陰影效果等。class="modal"模態(tài)框的最外層容器，可以控制模態(tài)框的顯示與隱藏。class="modal-dialog"

第二層容器，用來設(shè)置模態(tài)框顯示屬性。模態(tài)框模態(tài)框的結(jié)構(gòu)class="modal-footer"模態(tài)框腳注，包含操作按鈕等。class="modal-header"模態(tài)框頭部，包含標(biāo)題、關(guān)閉按鈕等。class="modal-body"模態(tài)框主體，是模態(tài)框的主要內(nèi)容。modal-content模態(tài)框的結(jié)構(gòu)在模態(tài)框的頭部往往放置一個關(guān)閉按鈕。按鈕上需要使用data-bs-dismiss屬性。<buttontype="button"class="btn-close"data-bs-dismiss="modal"></button><buttontype="button"class="btn-close"data-bs-dismiss="modal"data-bs-target="#mymodal"></button>如果關(guān)閉按鈕在模態(tài)框的外面，則需要設(shè)置data-bs-target屬性。模態(tài)框的調(diào)用/02模態(tài)框的調(diào)用打開模態(tài)框的方式設(shè)置data屬性javascript腳本模態(tài)框的調(diào)用

data屬性<buttontype="button"class="btnbtn-info"data-bs-toggle="modal"

data-bs-target="#myModal">toggle屬性：設(shè)置打開的元素類型，這里設(shè)置為modal，表示打開的是一個模態(tài)框。target：目標(biāo)，表示打開的是哪一個模態(tài)框，可以用id或class選擇器進(jìn)行選擇。模態(tài)框的調(diào)用

js腳本constmyModal=newbootstrap.Modal(document.getElementById('myModal'),option)//或者constmyModal=newbootstrap.Modal('#myModal',option)myModal.show()使用jquery語法：（需引用jquery.js文件）$("#myModal").modal('show')模態(tài)框的大小/03模態(tài)框的大小class類名模態(tài)框的最大尺寸.modal-sm300px默認(rèn)500px.modal-lg800px.modal-xl1140pxclass類名有效性.modal-fullscreen總是全屏.modal-fullscreen-{斷點}-down在斷點以下的屏幕寬度是全屏模態(tài)框的大小

全屏模態(tài)框

模態(tài)框的選項模態(tài)框的選項選項取值含義

data-bs-backdroptrue,false,static表示是否顯示遮罩層，默認(rèn)值true表示顯示；false表示不顯示；而static表示顯示遮罩層，但是單擊遮罩層區(qū)域不關(guān)閉模態(tài)框。data-bs-keyboardtrue，false單擊鍵盤ESC鍵時，是否關(guān)閉模態(tài)框；默認(rèn)值true表示關(guān)閉模態(tài)框；false表示單擊ESC鍵時不關(guān)閉模態(tài)框。data-bs-focus初始化時模態(tài)框是否獲取焦點。默認(rèn)值為true。true，false其他類其他類類名含義.fa