부트스트랩에 팝업 레이어가 있나요?-프런트엔드 Q&A-php.cn

부트스트랩에 팝업 레이어가 있나요?

WBOY

풀어 주다： 2022-06-16 15:57:00

원래의

1927명이 탐색했습니다.

부트스트랩에는 팝업 레이어가 있습니다. Popover 플러그인을 사용하여 팝업 레이어를 구현할 수 있습니다. 플러그인은 요구 사항에 따라 지정된 콘텐츠와 태그를 생성하고 생성된 콘텐츠를 팝에 배치할 수 있습니다. - 지정된 요소에 의해 트리거되는 팝업 상자 팝업 상자를 활성화하는 구문은 " ElementObject.popover(options)"입니다.

부트스트랩에 팝업 레이어가 있나요?

이 튜토리얼의 운영 환경: Windows 10 시스템, 부트스트랩 버전 5, DELL G3 컴퓨터

부트스트랩에 팝업 레이어가 있나요?

팝업 상자(팝오버)는 다음과 유사합니다. 툴팁(Tooltip)으로 확장된 뷰를 제공합니다. 팝오버를 활성화하려면 사용자가 해당 요소 위로 마우스를 가져가면 됩니다. 팝업 상자의 내용은 Bootstrap Data API를 사용하여 완전히 채울 수 있습니다. 이 방법은 도구 설명에 의존합니다.

이 플러그인의 기능을 별도로 참조하려면 Tooltip 플러그인에 따라 달라지는 popover.js를 참조해야 합니다. 또는 Bootstrap 플러그인 개요 장에서 언급한 대로 bootstrap.js 또는 bootstrap.min.js의 축소된 버전을 참조할 수 있습니다.

Usage

팝오버 플러그인은 필요에 따라 콘텐츠와 마크업을 생성합니다. 기본적으로 팝오버는 트리거 요소 뒤에 배치됩니다. 두 가지 방법으로 팝오버를 추가할 수 있습니다.

데이터 속성을 통해: 팝오버를 추가하려면 앵커/버튼 태그에 data-toggle="popover"를 추가하기만 하면 됩니다. 앵커의 제목은 팝오버의 텍스트입니다. 기본적으로 플러그인은 팝오버를 상단에 배치합니다.

<a href="#" data-toggle="popover" title="Example popover">
    请悬停在我的上面
</a>

로그인 후 복사

JavaScript를 통해: JavaScript를 통해 팝오버 활성화:

$(&#39;#identifier&#39;).popover(options)

로그인 후 복사

팝오버 플러그인은 이전에 설명한 드롭다운 메뉴 및 기타 플러그인과 같은 순수한 CSS 플러그인이 아닙니다. 플러그인을 사용하려면 jquery(javascript 읽기)를 사용하여 활성화해야 합니다. 다음 스크립트를 사용하여 페이지의 모든 팝오버를 활성화합니다:

$(function () { $("[data-toggle=&#39;popover&#39;]").popover(); });

로그인 후 복사

예는 다음과 같습니다:

<body>
<div class="container" style="padding: 100px 50px 10px;" >
<button type="button" class="btn btn-default" title="Popover title"  
data-container="body" data-toggle="popover" data-placement="left" 
data-content="左侧的 Popover 中的一些内容">
左侧的 Popover
</button>
<button type="button" class="btn btn-primary" title="Popover title"  
data-container="body" data-toggle="popover" data-placement="top" 
data-content="顶部的 Popover 中的一些内容">
顶部的 Popover
</button>
<button type="button" class="btn btn-success" title="Popover title"  
data-container="body" data-toggle="popover" data-placement="bottom" 
data-content="底部的 Popover 中的一些内容">
底部的 Popover
</button>
<button type="button" class="btn btn-warning" title="Popover title"  
data-container="body" data-toggle="popover" data-placement="right" 
data-content="右侧的 Popover 中的一些内容">
右侧的 Popover
</button>
</div>
<script>
$(function () { 
$("[data-toggle=&#39;popover&#39;]").popover();
});
</script>
</body>
</html>

로그인 후 복사

출력 결과:

부트스트랩에 팝업 레이어가 있나요?