부트 스트랩 팝업 플러그인은 확장 뷰를 제공합니다. 팝업 플러그인은 요구 사항에 따라 컨텐츠 및 태그를 생성합니다. 기본적으로 팝업은 트리거 요소 뒤에 배치됩니다.
팝 오버는 툴팁과 유사하여 확장 뷰를 제공합니다. 팝업 박스를 활성화하려면 사용자는 요소 위로 호버링하면됩니다. 팝업 박스의 내용은 Bootstrap Data API (Bootstrap Data API)를 사용하여 완전히 채워질 수 있습니다. 이 방법은 툴팁에 의존합니다.
플러그인의 기능을 별도로 참조하려면 툴팁 플러그인에 의존하는 Popover.js를 참조해야합니다. 또는 Bootstrap 플러그인 개요 장에서 언급했듯이 bootstrap.js 또는 compressed 버전의 bootstrap.min.js를 참조하십시오.
1. 사용법
Popover 플러그인은 필요에 따라 컨텐츠와 태그를 생성합니다. 기본적으로 팝 오버는 트리거 요소 뒤에 배치됩니다. 두 가지 방법으로 팝 오버를 추가 할 수 있습니다.
데이터 속성 전달 : 팝 오버를 추가하려면 앵커/버튼 레이블에 데이터 토글 = "Popover"를 추가하십시오. 앵커의 제목은 팝 오버의 텍스트입니다. 기본적으로 플러그인은 팝 오버를 상단에 설정합니다.
<a href = "#"data-toggle = "popover"> 내 </a> 위로 가져 가십시오
JavaScript를 통해 : JavaScript를 통해 Popover 활성화 :
$ ( '#식별자'). Popover (옵션)
Popover 플러그인은 드롭 다운 메뉴 및 앞에서 설명한 다른 플러그인과 같지 않으며 순수한 CSS 플러그인이 아닙니다. 플러그인을 사용하려면 jQuery를 사용하여 활성화해야합니다 (JavaScript 읽기). 다음 스크립트를 사용하여 페이지의 모든 팝 오버를 활성화하십시오.
$ (function () {$ ( "[data-toggle = 'popover']"). popover ();});
2. 예
팝업 상자는 요소를 클릭하여 제목과 컨텐츠가 포함 된 컨테이너를 팝업하는 것입니다.
// 기본 사용법 <버튼 유형 = "버튼"Data-Toggle = "Popover"Data-Content = "팝업 박스 플러그인입니다"> 팝업/팝업 상자를 클릭하여 클릭하십시오.
팝업 플러그인에는 다음과 같이 프롬프트 표시를 구성하는 많은 속성이 있습니다.
$ ( 'button'). popover ({컨테이너 : 'body', viewport : {selector : '#view', padding : 10,}});JavaScript를 통해 실행하는 4 가지 방법이 있습니다.
// show $ ( 'button'). popover ( 'show'); // hide $ ( 'button'). popover ( 'hide'); // show and hide $ ( 'button'); popover ( 'toggle'); hide and destrove $ ( 'button').
Popover 플러그인에는 4 가지 유형의 이벤트가 있습니다.
// $ ( 'button'). on ( 'show.bs.tab', function () {alert ( 'show method!');});위는이 기사에 관한 것입니다. 모든 사람이 부트 스트랩 팝업 플러그인을 배우는 것이 도움이되기를 바랍니다.