Bootstrap에서 모달 상자를 사용하는 방법은 무엇입니까? Modal 구성 요소 사용에 대한 간략한 분석
- 青灯夜游앞으로
- 2021-12-06 19:00:392361검색
Bootstrap에서 모달 상자를 사용하는 방법은 무엇입니까? 다음 기사에서는 Bootstrap5 모달 팝업 상자의 모달 구성 요소 사용법을 소개하겠습니다. 도움이 되길 바랍니다.
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>
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;"> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"></pre><p>替换为</p><pre class="brush:html;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 data-id="heading-4">3 滚动长内容</h1>
<h2 data-id="heading-5">3.1 使用浏览器滚动条</h2>
<p>默认情况下，当使用者的动态视窗变得太长时，它们的滚动独立于于页面本身，在浏览器上会启用竖向滚动条。</p><pre class="brush:html;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 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>
<div>
<div>
<h5 id="exampleModalLongTitle">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="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;"><div class="modal-dialog"></pre><p>替换为</p><pre class="brush:html;toolbar:false;"><div class="modal-dialog modal-dialog-scrollable"></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-centered到modal-dialog
<div class="modal-dialog modal-dialog-centered">코드를
复制代码로 바꾸세요. 모양에는 차이가 없으며 배경을 클릭하기만 하면 팝업 상자가 더 이상 닫히지 않습니다.3 스크롤 긴 내용
3.1 브라우저 스크롤 막대 사용
기본적으로 사용자의 동적 창이 너무 길면, 페이지 자체와 독립적으로 스크롤하여 브라우저에서 수직 스크롤 막대를 활성화합니다.
3.2 팝업 스크롤 막대 사용
modal-dialog에 modal-dialog-scrollable을 추가하면 스크롤 가능한 본문이 있는 팝업 창을 만들 수 있습니다.
26.3.1 예제에서 
rrreee
rrreee로 바꾸세요. png" alt="Bootstrap에서 모달 상자를 사용하는 방법은 무엇입니까? Modal 구성 요소 사용에 대한 간략한 분석"/>