1 Bootstrap5模態彈框工作原理

#使用Bootstrap的JavaScript模式外掛程式將對話方塊新增至網站中，用於燈箱、使用者通知或完全自訂的內容。【相關推薦：《bootstrap教學》】

互動視窗是用HTML、CSS和JavaScript建構的。它們位於文件中任何其他內容之上，並從body中刪除滾動，以便互動視窗的內容滾動。
點擊互動視窗「backdrop」將自動關閉互動視窗。
Bootstrap一次只支援一個互動視窗。不支援嵌套互動視窗，因為我們認為嵌套互動視窗用戶體驗不佳。
互動視窗使用position: fixed，在渲染呈現上會有點特別。盡可能將您的互動視窗HTML放置在頂級位置，以避免其他元素的潛在幹擾。在另一個固定元素中內加入一個.modal的時候，你可能會遇到問題。
由於position: fixed，在行動裝置上使用互動視窗有一些附加說明。
依據HTML5定義語意的方式，autofocus HTML屬性對Bootstrap互動視窗沒有影響。要達到相同的效果，請使用一些自訂JavaScript：the autofocus HTML attribute

2 完整範例

2.1 完整範例

透過點擊下面的按鈕切換動態視窗呈現。它將從頁面頂部向下滑動並淡入。點選關閉按鈕或點選背景區域，彈出視窗關閉。

<!doctype html>
<html>
  <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>模态框</title>
  </head>
  <body>
    <div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    删除内容
    </button>
    
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div>
    <div>
    <div>
      <h5 id="确认提示">确认提示</h5>
      <button type="button" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div>
      删除后不可恢复！
    </div>
    <div>
      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      <button type="button" class="btn btn-primary">继续删除</button>
    </div>
    </div>
    </div>
    </div>
        
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap中怎麼使用模態框？ Modal組件用法淺析

2.2 靜態背景

當背景設為靜態時，互動視窗不會因為點擊背景而關閉。將data-bs-backdrop="static" data-bs-keyboard="false" 加入<div class="modal fade">即可。 <p>將26.2.1範例中的程式碼</p><pre class='brush:php;toolbar:false;'> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"></pre><p>替換為</p><pre class='brush:php;toolbar:false;'><div class="modal fade" id="exampleModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"></pre><p>從外觀上看沒什麼區別，只是點擊背景，彈出框不再被關閉。 </p> <h1 id="滾動長內容">3 滾動長內容</h1> <h2 id="使用瀏覽器捲軸">3.1 使用瀏覽器捲軸</h2> <p>預設情況下，當使用者的動態視窗變得太長時，它們的滾動獨立於頁面本身，在瀏覽器上會啟用垂直捲軸。 </p><pre class='brush:php;toolbar:false;'><!doctype html> <html> <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>模态框</title> </head> <body> <div>  <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> <div> <div> <h5 id="万不看脸社交的年轻人">3300万不看脸社交的年轻人</h5> <button type="button" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div> <p>Z世代正在成为全球消费的生力军。这批出生于1995-2009年间的移动互联网原住民，在经济快速增长、多元文化碰撞、信息资讯空前繁盛的世界中，形成了既包容又挑剔的审美倾向，他们将个人兴趣与好恶作为社交的基础原则，进而导致新一代社交的“部落化”与“孤岛化”趋势。</p> <p>这种由Z世代主导的全新数字行为方式，正在大张旗鼓地改造全球移动应用的形态，给沉寂已久的移动社交应用生态带来新的可能性。</p> <p>长久以来，微信稳坐“社交霸主”地位的核心原因，是在于它巧妙地将熟人社会生态搬到线上并实现推广，换言之，微信解决的是生存问题。但当下年轻人有着更复杂的陪伴、表达与个人认同需求，需要寻求其它途径实现，这种需求反映到社交市场后，带来了新一代社交产品的个性化。</p> <p>比如Soul，这个推出不到5年的社交产品在年轻群体中迅速打开市场，Soul的DAU已达千万量级，同比增长94.4%，其中73.9%的DAU是Z世代。同时也凭借全新的社交玩法达成3300万MAU。更值得关注的是，从2020年7月开始至今，用户增长速度平均保持在105%以上。根据腾讯智库数据，Soul在95后的渗透率达到了行业前三，TGI指标维度(Target Group Index，用于衡量用户偏好度)上Soul在95后群体中达到了127，远超过100的平均值，足以反映Soul在95后群体中的受欢迎程度。</p> <p>Soul的成长路径，不依赖于既有关系链的转移或映射，也没有通过KOL或头部主播吸粉，而是平台完成冷启动，这种形态在海内外都找不到可对标的先例。这个年轻的社交平台是如何长成的？没有引入线下关系，Soul如何确保留存率和活跃度？</p> <p>“反传统”的运营策略</p> <p>纵观全球社交行业，从关系链闭环的⻆度来看，社交产品类型主要有三种。</p> <p>第一种是把已有的外部关系链复制到社交产品中，主要是手机通讯录、邮箱等线下关系的映射，Facebook、微信、QQ都属于此类；第二种是基于地理位置进行匹配，比如“附近的人”、“同城交友”，上一代陌生人社交产品主要沿用这一路径；第三种是通过话题、内容或兴趣进行聚合，比如前段时间爆火的Clubhouse。</p> <p>但Soul不属于上述任何一种。用户首次进入Soul时，要先打造一个全新身份、进行“灵魂测试”、最后打上个性化标签；基于这个虚拟的线上形象，用户可以进行自我表达、认知他人、探索世界、交流兴趣和观点、获得情感支持和认同感、从交流中获取信息和有质量的新关系。</p> </div> <div> <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></pre><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/628/760/493/1638788219753440.png?x-oss-process=image/resize,p_40" class="lazy" title="163878823469018Bootstrap中怎麼使用模態框？ Modal組件用法淺析" alt="Bootstrap中怎麼使用模態框？ Modal組件用法淺析"></p> <h2 id="使用彈跳窗滾動條">3.2 使用彈跳窗滾動條</h2> <p>你可以在modal-dialog 中加入modal-dialog-scrollable 來建立一個body 可捲動的彈出窗口。 </p> <p>將26.3.1範例中</p><pre class='brush:php;toolbar:false;'><div class="modal-dialog"></pre><p>替換為</p><pre class='brush:php;toolbar:false;'><div class="modal-dialog modal-dialog-scrollable"></pre><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/628/760/493/1638788219753440.png?x-oss-process=image/resize,p_40" class="lazy" title="163878823834615Bootstrap中怎麼使用模態框？ Modal組件用法淺析" alt="Bootstrap中怎麼使用模態框？ Modal組件用法淺析"></p> <h1 id="垂直置中">4 垂直置中</h1>##加入<p> modal-dialog-centered<code>到modal-dialog來讓互動視窗垂直居中。該設定較為簡單，只需做以下更改即可。

<div class="modal-dialog modal-dialog-centered">

下邊是帶有捲軸的

复制代码上面的例子由於截圖只選擇了一部分視窗的原因，可能看不出，以下兩張圖分別是26.2.1示範把窗口拉高後的顯示效果，並增加垂直居中後的顯示效果。 

5 多個模態框切換
在多個模態之間切換，巧妙地放置data -bs-target和data-bs-Toggle屬性。例如，可以在已開啟的登入模式中切換密碼重設模式。請注意，不能同時開啟多個模態。這個方法只是在兩個單獨的模態之間切換。 

    Open first modalddd
    
      <div class="modal-dialog modal-dialog-centered">
        
          
            最新消息
            
          
          
            第一条消息
          
          
            
          
        
      
    
    
      <div class="modal-dialog modal-dialog-centered">
        
          
            最新消息
            
          
          
            第二条消息

Bootstrap中怎麼使用模態框？ Modal組件用法淺析

更多關於bootstrap的相關知識，可在：

bootstrap基礎教學！！

以上是Bootstrap中怎麼使用模態框？ Modal組件用法淺析的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：掘金社区。如有侵權，請聯絡admin@php.cn刪除

將引導程序集成到React：實用指南Apr 25, 2025 am 12:04 AM

將Bootstrap集成到React項目中的步驟包括：1.安裝Bootstrap包，2.導入CSS文件，3.使用Bootstrap類名樣式化元素，4.使用React-Bootstrap或reactstrap庫來使用Bootstrap的JavaScript組件。這種集成利用React的組件化和Bootstrap的樣式系統，實現高效的UI開發。

Bootstrap是用什麼？一個實用的解釋Apr 24, 2025 am 12:16 AM

bootstrapisapowerfulflameworkthatsimplifiesCreatingingResponsive，移動 - firstwebsites.itoffers.itoffers：1）AgridSystemforadaptableBableLayouts，2）2）pre-styledlementslikeButtonslikeButtonSandForms和3）JavaScriptCompriptcomponcomponentsSuchcaroSelSuselforEnhanceSuch forenhanceTinteractivity。

引導程序：從佈局到組件Apr 23, 2025 am 12:06 AM

Bootstrap是一個由Twitter開發的前端框架，集成了HTML、CSS和JavaScript，幫助開發者快速構建響應式網站。其核心功能包括：柵格系統與佈局：基於12列的設計，使用flexbox佈局，支持不同設備尺寸的響應式頁面。組件與樣式：提供豐富的組件庫，如按鈕、模態框等，通過添加類名即可實現美觀效果。工作原理：依賴CSS和JavaScript，CSS使用LESS或SASS預處理器，JavaScript依賴jQuery，實現交互和動態效果。通過這些功能，Bootstrap大大提升了開發

什麼是bootstrap？初學者的介紹Apr 22, 2025 am 12:07 AM

BootstrapisafreeCSSframeworkthatsimplifieswebdevelopmentbyprovidingpre-styledcomponentsandJavaScriptplugins.It'sidealforcreatingresponsive,mobile-firstwebsites,offeringaflexiblegridsystemforlayoutsandasupportivecommunityforlearningandcustomization.

Bootstrap Demystified：一個簡單的解釋Apr 21, 2025 am 12:13 AM

Bootstrapisafree,open-sourceCSSframeworkthathelpscreateresponsive,mobile-firstwebsites.1)Itoffersagridsystemforlayoutflexibility,2)includespre-styledcomponentsforquickdesign,and3)ishighlycustomizabletoavoidgenericlooks,butrequiresunderstandingCSStoop