>  기사  >  웹 프론트엔드  >  Bootstrap에서 모달 상자를 사용하는 방법은 무엇입니까? Modal 구성 요소 사용에 대한 간략한 분석

Bootstrap에서 모달 상자를 사용하는 방법은 무엇입니까? Modal 구성 요소 사용에 대한 간략한 분석

青灯夜游
青灯夜游앞으로
2021-12-06 19:00:392384검색

Bootstrap에서 모달 상자를 사용하는 방법은 무엇입니까? 다음 기사에서는 Bootstrap5 모달 팝업 상자의 모달 구성 요소 사용법을 소개하겠습니다. 도움이 되길 바랍니다.

Bootstrap에서 모달 상자를 사용하는 방법은 무엇입니까? Modal 구성 요소 사용에 대한 간략한 분석

1 Bootstrap 5 모달 팝업 작동 방식

Bootstrap의 JavaScript 모달 플러그인을 사용하여 라이트박스, 사용자 알림 또는 완전히 맞춤화된 콘텐츠를 위한 대화 상자를 사이트에 추가하세요. [관련 추천: "부트스트랩 튜토리얼"]

  • 대화형 창은 HTML, CSS 및 JavaScript로 구축되었습니다. 파일의 다른 콘텐츠 위에 위치하며 대화형 뷰포트의 콘텐츠가 스크롤되도록 본문에서 스크롤을 제거합니다.
  • 대화형 창에서 "배경화면"을 클릭하면 대화형 창이 자동으로 닫힙니다.
  • Bootstrap은 한 번에 하나의 대화형 창만 지원합니다. 중첩된 대화형 창은 좋지 않은 사용자 환경으로 간주되므로 중첩된 대화형 창은 지원되지 않습니다.
  • 대화형 창은 위치: 고정을 사용하는데, 이는 렌더링 및 프리젠테이션에서 조금 특별합니다. 다른 요소의 잠재적인 간섭을 피하기 위해 가능하면 대화형 뷰포트 HTML을 최상위 수준에 배치하십시오. 다른 고정 요소 내에 .modal을 추가할 때 문제가 발생할 수 있습니다.
  • 위치: 고정으로 인해 모바일 장치에서 대화형 창을 사용하기 위한 몇 가지 추가 지침이 있습니다.
  • HTML5가 의미를 정의하는 방식에 따르면 자동 초점 HTML 속성은 Bootstrap 대화형 창에 영향을 미치지 않습니다. 동일한 효과를 얻으려면 일부 사용자 정의 JavaScript를 사용하십시오. 자동 초점 HTML 속성

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="exampleModalLabel">确认提示</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 정적 배경

배경이 정적으로 설정되면 배경을 클릭해도 대화형 창이 닫히지 않습니다. <div class="modal fade">에 <code>data-bs-backdrop="static" data-bs-keyboard="false"를 추가하기만 하면 됩니다. data-bs-backdrop="static" data-bs-keyboard="false" 加入<div class="modal fade">即可。<p>将26.2.1例子中的代码</p><pre class="brush:html;toolbar:false;"> &lt;div class=&quot;modal fade&quot; id=&quot;exampleModal&quot; tabindex=&quot;-1&quot; aria-labelledby=&quot;exampleModalLabel&quot; aria-hidden=&quot;true&quot;&gt;</pre><p>替换为</p><pre class="brush:html;toolbar:false;">&lt;div class=&quot;modal fade&quot; id=&quot;exampleModal&quot; data-bs-backdrop=&quot;static&quot; data-bs-keyboard=&quot;false&quot; tabindex=&quot;-1&quot; aria-labelledby=&quot;exampleModalLabel&quot; aria-hidden=&quot;true&quot;&gt;</pre><p>从外观上看没什么区别,只是点击背景,弹出框不再被关闭。</p> <h1 data-id="heading-4">3 滚动长内容</h1> <h2 data-id="heading-5">3.1 使用浏览器滚动条</h2> <p>默认情况下,当使用者的动态视窗变得太长时,它们的滚动独立于于页面本身,在浏览器上会启用竖向滚动条。</p><pre class="brush:html;toolbar:false;">&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt; &lt;meta name=&quot;keywords&quot; content=&quot;&quot;&gt; &lt;meta name=&quot;description&quot; content=&quot;&quot;&gt; &lt;link href=&quot;../bootstrap5/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt; &lt;title&gt;模态框&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;!-- Button trigger modal --&gt; &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; data-bs-toggle=&quot;modal&quot; data-bs-target=&quot;#exampleModalLong&quot;&gt; 滚动弹窗演示 &lt;/button&gt; &lt;div class=&quot;modal fade&quot; id=&quot;exampleModalLong&quot; tabindex=&quot;-1&quot; aria-labelledby=&quot;exampleModalLongTitle&quot; aria-hidden=&quot;true&quot;&gt; &lt;div&gt; &lt;div&gt; &lt;div&gt; &lt;h5 id=&quot;exampleModalLongTitle&quot;&gt;3300万不看脸社交的年轻人&lt;/h5&gt; &lt;button type=&quot;button&quot; data-bs-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;&lt;/button&gt; &lt;/div&gt; &lt;div&gt; &lt;p&gt;Z世代正在成为全球消费的生力军。这批出生于1995-2009年间的移动互联网原住民,在经济快速增长、多元文化碰撞、信息资讯空前繁盛的世界中,形成了既包容又挑剔的审美倾向,他们将个人兴趣与好恶作为社交的基础原则,进而导致新一代社交的“部落化”与“孤岛化”趋势。&lt;/p&gt; &lt;p&gt;这种由Z世代主导的全新数字行为方式,正在大张旗鼓地改造全球移动应用的形态,给沉寂已久的移动社交应用生态带来新的可能性。&lt;/p&gt; &lt;p&gt;长久以来,微信稳坐“社交霸主”地位的核心原因,是在于它巧妙地将熟人社会生态搬到线上并实现推广,换言之,微信解决的是生存问题。但当下年轻人有着更复杂的陪伴、表达与个人认同需求,需要寻求其它途径实现,这种需求反映到社交市场后,带来了新一代社交产品的个性化。&lt;/p&gt; &lt;p&gt;比如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后群体中的受欢迎程度。&lt;/p&gt; &lt;p&gt;Soul的成长路径,不依赖于既有关系链的转移或映射,也没有通过KOL或头部主播吸粉,而是平台完成冷启动,这种形态在海内外都找不到可对标的先例。这个年轻的社交平台是如何长成的?没有引入线下关系,Soul如何确保留存率和活跃度?&lt;/p&gt; &lt;p&gt;“反传统”的运营策略&lt;/p&gt; &lt;p&gt;纵观全球社交行业,从关系链闭环的⻆度来看,社交产品类型主要有三种。&lt;/p&gt; &lt;p&gt;第一种是把已有的外部关系链复制到社交产品中,主要是手机通讯录、邮箱等线下关系的映射,Facebook、微信、QQ都属于此类;第二种是基于地理位置进行匹配,比如“附近的人”、“同城交友”,上一代陌生人社交产品主要沿用这一路径;第三种是通过话题、内容或兴趣进行聚合,比如前段时间爆火的Clubhouse。&lt;/p&gt; &lt;p&gt;但Soul不属于上述任何一种。用户首次进入Soul时,要先打造一个全新身份、进行“灵魂测试”、最后打上个性化标签;基于这个虚拟的线上形象,用户可以进行自我表达、认知他人、探索世界、交流兴趣和观点、获得情感支持和认同感、从交流中获取信息和有质量的新关系。&lt;/p&gt; &lt;/div&gt; &lt;div&gt; &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-bs-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt; &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;Save changes&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;script src=&quot;../bootstrap5/bootstrap.bundle.min.js&quot; &gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</pre><p><img src="https://img.php.cn/upload/image/278/505/298/163878823469018Bootstrap%EC%97%90%EC%84%9C%20%EB%AA%A8%EB%8B%AC%20%EC%83%81%EC%9E%90%EB%A5%BC%20%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94%20%EB%B0%A9%EB%B2%95%EC%9D%80%20%EB%AC%B4%EC%97%87%EC%9E%85%EB%8B%88%EA%B9%8C?%20Modal%20%EA%B5%AC%EC%84%B1%20%EC%9A%94%EC%86%8C%20%EC%82%AC%EC%9A%A9%EC%97%90%20%EB%8C%80%ED%95%9C%20%EA%B0%84%EB%9E%B5%ED%95%9C%20%EB%B6%84%EC%84%9D" title="163878823469018Bootstrap에서 모달 상자를 사용하는 방법은 무엇입니까? Modal 구성 요소 사용에 대한 간략한 분석" alt="Bootstrap에서 모달 상자를 사용하는 방법은 무엇입니까? Modal 구성 요소 사용에 대한 간략한 분석"></p> <h2 data-id="heading-6">3.2 使用弹窗滚动条</h2> <p>你可以在modal-dialog 中加入modal-dialog-scrollable 來創建一个 body 可滚动的弹出窗口。</p> <p>将26.3.1例子中</p><pre class="brush:html;toolbar:false;">&lt;div class=&quot;modal-dialog&quot;&gt;</pre><p>替换为</p><pre class="brush:html;toolbar:false;">&lt;div class=&quot;modal-dialog modal-dialog-scrollable&quot;&gt;</pre><p><img src="https://img.php.cn/upload/image/343/686/586/163878823834615Bootstrap%EC%97%90%EC%84%9C%20%EB%AA%A8%EB%8B%AC%20%EC%83%81%EC%9E%90%EB%A5%BC%20%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94%20%EB%B0%A9%EB%B2%95%EC%9D%80%20%EB%AC%B4%EC%97%87%EC%9E%85%EB%8B%88%EA%B9%8C?%20Modal%20%EA%B5%AC%EC%84%B1%20%EC%9A%94%EC%86%8C%20%EC%82%AC%EC%9A%A9%EC%97%90%20%EB%8C%80%ED%95%9C%20%EA%B0%84%EB%9E%B5%ED%95%9C%20%EB%B6%84%EC%84%9D" title="163878823834615Bootstrap에서 모달 상자를 사용하는 방법은 무엇입니까? Modal 구성 요소 사용에 대한 간략한 분석" alt="Bootstrap에서 모달 상자를 사용하는 방법은 무엇입니까? Modal 구성 요소 사용에 대한 간략한 분석"></p> <h1 data-id="heading-7">4 垂直居中</h1> <p>加入<code>modal-dialog-centeredmodal-dialog

26.2.1 예제의

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

코드를

复制代码로 바꾸세요. 모양에는 차이가 없으며 배경을 클릭하기만 하면 팝업 상자가 더 이상 닫히지 않습니다.

3 스크롤 긴 내용 Bootstrap에서 모달 상자를 사용하는 방법은 무엇입니까? Modal 구성 요소 사용에 대한 간략한 분석

3.1 브라우저 스크롤 막대 사용

기본적으로 사용자의 동적 창이 너무 길면, 페이지 자체와 독립적으로 스크롤하여 브라우저에서 수직 스크롤 막대를 활성화합니다. Bootstrap에서 모달 상자를 사용하는 방법은 무엇입니까? Modal 구성 요소 사용에 대한 간략한 분석

Open first modalddd

Bootstrap에서 모달 상자를 사용하는 방법은 무엇입니까? Modal 구성 요소 사용에 대한 간략한 분석

3.2 팝업 스크롤 막대 사용

modal-dialog에 modal-dialog-scrollable을 추가하면 스크롤 가능한 본문이 있는 팝업 창을 만들 수 있습니다.

26.3.1 예제에서 Bootstrap에서 모달 상자를 사용하는 방법은 무엇입니까? Modal 구성 요소 사용에 대한 간략한 분석rrreee

rrreee로 바꾸세요. png" alt="Bootstrap에서 모달 상자를 사용하는 방법은 무엇입니까? Modal 구성 요소 사용에 대한 간략한 분석"/>

4 세로 가운데 정렬🎜모달 추가 -dialog-centeredmodal-dialog로 변경하여 대화형 창을 세로 중앙에 배치합니다. 이 설정은 비교적 간단합니다. 다음과 같이 변경하면 됩니다. 🎜rrreee🎜하단에는 스크롤바가 있습니다🎜rrreee🎜위 예시는 스크린샷에서 창의 일부만 선택되어 있어서 보이지 않을 수 있습니다. 다음 두 사진은 창을 올린 후 표시 효과를 보여주기 위한 26.2.1 입니다. , 수직 센터링 추가 후 표시 효과. 🎜🎜🎜🎜🎜🎜🎜🎜5 다중 모달 상자 전환 🎜🎜 여러 모달리티 간에 전환하여 data-bs-target 및 data-bs-Toggle 속성을 교묘하게 배치합니다. 예를 들어, 공개 로그인 모드 내에서 비밀번호 재설정 모드를 전환할 수 있습니다. 여러 모달을 동시에 열 수는 없습니다. 이 방법은 단순히 두 가지 개별 양식 사이를 전환합니다. 🎜rrreee🎜🎜🎜🎜부트스트랩에 대한 자세한 내용을 보려면 🎜부트스트랩 기본 튜토리얼🎜을 방문하세요! ! 🎜

위 내용은 Bootstrap에서 모달 상자를 사용하는 방법은 무엇입니까? Modal 구성 요소 사용에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript html5 css bootstrap html Static class position
성명:
이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사:Bootstrap에 목록을 추가하는 방법은 무엇입니까? 목록 그룹 사용법에 대한 간략한 분석다음 기사:Bootstrap에 목록을 추가하는 방법은 무엇입니까? 목록 그룹 사용법에 대한 간략한 분석

관련 기사

더보기