26.1 Bootstrap5模態(tài)彈框工作原理
使用Bootstrap的JavaScript模式插件將對話框添加到站點中，用于燈箱、用戶通知或完全自定義的內(nèi)容。
- 互動視窗是用HTML、CSS和JavaScript構(gòu)建的。它們位于文件中任何其他內(nèi)容之上，并從body中刪除滾動，以便互動視窗的內(nèi)容滾動。
- 點擊互動視窗“backdrop”將自動關(guān)閉互動視窗。
- Bootstrap一次只支持一個互動視窗。不支持嵌套互動視窗，因為我們認為嵌套互動視窗用戶體驗不佳。
- 互動視窗使用position: fixed，在渲染呈現(xiàn)上會有點特別。盡可能將您的互動視窗HTML放置在頂級位置，以避免其他元素的潛在干擾。在另一個固定元素中內(nèi)加入一個.modal的時候，你可能會遇到問題。
- 由于position: fixed，在移動設(shè)備上使用互動視窗有一些附加說明。
- 依據(jù)HTML5定義語義的方式，autofocus HTML屬性對Bootstrap互動視窗沒有影響。要達到同樣的效果，請使用一些自定義JavaScript：the autofocus HTML attribute
26.2 完整示例
26.2.1 完整示例
通過點擊下面的按鈕切換動態(tài)視窗呈現(xiàn)。它將從頁面頂部向下滑動并淡入。點擊關(guān)閉按鈕或者點擊背景區(qū)域，彈出窗口關(guān)閉。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>模態(tài)框</title>
</head>
<body>
<div class="container">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
刪除內(nèi)容
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">確認提示</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
刪除后不可恢復(fù)！
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">關(guān)閉</button>
<button type="button" class="btn btn-primary">繼續(xù)刪除</button>
</div>
</div>
</div>
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
復(fù)制代碼26.2.2 靜態(tài)背景
當將背景設(shè)置為靜態(tài)時，互動視窗不會因為點擊背景而關(guān)閉。將data-bs-backdrop="static" data-bs-keyboard="false" 加入<div class="modal fade">即可。
將26.2.1例子中的代碼
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
復(fù)制代碼替換為
<div class="modal fade" id="exampleModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
復(fù)制代碼從外觀上看沒什么區(qū)別，只是點擊背景，彈出框不再被關(guān)閉。
26.3 滾動長內(nèi)容
26.3.1 使用瀏覽器滾動條
默認情況下，當使用者的動態(tài)視窗變得太長時，它們的滾動獨立于于頁面本身，在瀏覽器上會啟用豎向滾動條。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>模態(tài)框</title>
</head>
<body>
<div class="container">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLong">
滾動彈窗演示
</button>
<div class="modal fade" id="exampleModalLong" tabindex="-1" aria-labelledby="exampleModalLongTitle"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">3300萬不看臉社交的年輕人</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Z世代正在成為全球消費的生力軍。這批出生于1995-2009年間的移動互聯(lián)網(wǎng)原住民，在經(jīng)濟快速增長、多元文化碰撞、信息資訊空前繁盛的世界中，形成了既包容又挑剔的審美傾向，他們將個人興趣與好惡作為社交的基礎(chǔ)原則，進而導致新一代社交的“部落化”與“孤島化”趨勢。</p>
<p>這種由Z世代主導的全新數(shù)字行為方式，正在大張旗鼓地改造全球移動應(yīng)用的形態(tài)，給沉寂已久的移動社交應(yīng)用生態(tài)帶來新的可能性。</p>
<p>長久以來，微信穩(wěn)坐“社交霸主”地位的核心原因，是在于它巧妙地將熟人社會生態(tài)搬到線上并實現(xiàn)推廣，換言之，微信解決的是生存問題。但當下年輕人有著更復(fù)雜的陪伴、表達與個人認同需求，需要尋求其它途徑實現(xiàn)，這種需求反映到社交市場后，帶來了新一代社交產(chǎn)品的個性化。</p>
<p>比如Soul，這個推出不到5年的社交產(chǎn)品在年輕群體中迅速打開市場，Soul的DAU已達千萬量級，同比增長94.4%，其中73.9%的DAU是Z世代。同時也憑借全新的社交玩法達成3300萬MAU。更值得關(guān)注的是，從2020年7月開始至今，用戶增長速度平均保持在105%以上。根據(jù)騰訊智庫數(shù)據(jù)，Soul在95后的滲透率達到了行業(yè)前三，TGI指標維度(Target Group Index，用于衡量用戶偏好度)上Soul在95后群體中達到了127，遠超過100的平均值，足以反映Soul在95后群體中的受歡迎程度。</p>
<p>Soul的成長路徑，不依賴于既有關(guān)系鏈的轉(zhuǎn)移或映射，也沒有通過KOL或頭部主播吸粉，而是平臺完成冷啟動，這種形態(tài)在海內(nèi)外都找不到可對標的先例。這個年輕的社交平臺是如何長成的？沒有引入線下關(guān)系，Soul如何確保留存率和活躍度？</p>
<p>“反傳統(tǒng)”的運營策略</p>
<p>縱觀全球社交行業(yè)，從關(guān)系鏈閉環(huán)的?度來看，社交產(chǎn)品類型主要有三種。</p>
<p>第一種是把已有的外部關(guān)系鏈復(fù)制到社交產(chǎn)品中，主要是手機通訊錄、郵箱等線下關(guān)系的映射，F(xiàn)acebook、微信、QQ都屬于此類；第二種是基于地理位置進行匹配，比如“附近的人”、“同城交友”，上一代陌生人社交產(chǎn)品主要沿用這一路徑；第三種是通過話題、內(nèi)容或興趣進行聚合，比如前段時間爆火的Clubhouse。</p>
<p>但Soul不屬于上述任何一種。用戶首次進入Soul時，要先打造一個全新身份、進行“靈魂測試”、最后打上個性化標簽；基于這個虛擬的線上形象，用戶可以進行自我表達、認知他人、探索世界、交流興趣和觀點、獲得情感支持和認同感、從交流中獲取信息和有質(zhì)量的新關(guān)系。</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
復(fù)制代碼26.3.2 使用彈窗滾動條
你可以在modal-dialog 中加入modal-dialog-scrollable 來創(chuàng)建一個 body 可滾動的彈出窗口。
將26.3.1例子中
<div class="modal-dialog">
復(fù)制代碼替換為
<div class="modal-dialog modal-dialog-scrollable">
復(fù)制代碼26.4 垂直居中
加入modal-dialog-centered到modal-dialog來使互動視窗垂直居中。
該設(shè)置較為簡單，只需做如下改變即可。
<div class="modal-dialog modal-dialog-centered">
復(fù)制代碼下邊是帶滾動條的
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
復(fù)制代碼上面的例子由于截圖只選擇了一部分窗口的原因，可能看不出，以下兩張圖分別是26.2.1演示把窗口拉高后的顯示效果，和添加垂直居中后的顯示效果。
26.5 多個模態(tài)框切換
在多個模態(tài)之間切換，巧妙地放置data-bs-target和data-bs-Toggle屬性。例如，可以在已打開的登錄模式中切換密碼重置模式。請注意，不能同時打開多個模態(tài)。這個方法只是在兩個單獨的模態(tài)之間切換。
<div class="bd-example">
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modalddd</a>
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel"
tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel">最新消息</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
第一條消息
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal"
data-bs-dismiss="modal">查看下一條</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2"
tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel2">最新消息</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
第二條消息
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal"
data-bs-dismiss="modal">查看第一條</button>
</div>
</div>
</div>
</div>
</div>
復(fù)制代碼今天的課程就到這里，請關(guān)注我，及時學習 俺老劉原創(chuàng)的《Bootstrap5零基礎(chǔ)到精通》第27節(jié) Bootstrap5 彈出提示和工具提示組件用法，這兩個組件功能都很單一，用法也很簡單，有很多相似之處。
如果這篇文章對你有幫助，記得隨手點贊哦！