iPad의 영향과 마찬가지로 페이지 컨텐츠에 작은 오버레이를 추가하여 페이지 요소에 추가 정보를 추가하십시오.
플러그인 종속성
팝업 상자는 툴팁 플러그인에 따라 달라 지므로 툴팁 플러그인을 먼저로드해야합니다.
선택적 추가 기능
성능 고려 사항의 경우 툴팁 및 팝업 구성 요소의 데이터 속성 API가 선택적으로 추가되므로 직접 초기화해야합니다.
버튼 그룹 및 입력 상자 그룹에서 팝업 박스를 사용할 때 추가 설정이 필요합니다.
프롬프트 상자가 .btn-group 또는 .input-group과 함께 사용되면 컨테이너를 지정해야합니다. 컨테이너 : '본문'옵션 (아래 문서 참조)이 원치 않는 부작용을 피하기 위해 (예 : 팝업 상자가 나타나는 경우, 그것과 협력하는 페이지 요소가 더 넓어 지거나 끊어 질 수 있습니다).
금지 된 페이지 요소에서 팝업 상자를 사용하는 경우 추가 요소를 추가해야합니다.
팝업 상자를 비활성화 또는 .Disabled 요소에 추가하려면 <div>의 팝업 상자에 추가 해야하는 페이지 요소를 감고 <Div> 요소에 팝업 상자를 적용하십시오.
1. 정적 케이스
4 옵션 옵션 : 상단, 오른쪽, 하단 및 왼쪽 배열.
코드 세그먼트
.bs-example {Border-Color : #dd; Border-Radius : 4px 4px 0 0; 국경비 : 1px; Box-Shadow : 없음; 왼쪽 마진 : 0; 마진 오른쪽 : 0; 국경 스타일 : 단단한; } .bs-example-popover .popover {위치 : 상대; 디스플레이 : 블록; 플로트 : 왼쪽; 너비 : 240px; 마진 : 20px; }<H1> 3. 팝업 박스 </h1> <div> <div> <div> </div> <h3> Popover Top </h3> <div> <p> sed posueer consectetur est. Aenean EU Leo Quam. Pellentesque Ornare Sem Lacinia Quam Venenatis Vesibulum. Aenean EU Leo Quam. Pellentesque Ornare Sem Lacinia Quam Venenatis. Aenean EU Leo Quam. Pellentesque Ornare Sem Lacinia Quam Venenatis Vesibulum. Aenean EU Leo Quam. Pellentesque Ornare Sem Lacinia Quam Venenatis Vesibulum. Aenean EU Leo Quam. Pellentesque Ornare Sem Lacinia Quam Venenatis Vestibulum. </p> </div> </div> </div> </div> </div>
미리보기 효과
코드 스 니펫 :
<a href = "javaScript : void (0)"id = "a_pop"data-placement = "bottom"data-content = "Wind and Rain은 백마를 따라 잡는 데 시간을 소비하는 것과 같습니다. 당신은 여전히 젊은 손바닥에서 꿈을 잡고 있습니다.이 도로에서 잃어버린 구름은 누가 분리되어야한다고 말했는데, 우리는 영원히 함께 말해야한다고 말했습니다. 전 세계에서 벗어나 바람이 불고 눈송이가 머리카락을 밝게합니다. 당신은 한 번 당신이 분리되어야하고 영원히 함께 있어야한다고 말했고, 이제 나는 당신이 단지 유치한 말인지 묻고 싶습니다. 나는 당신에게 살 것입니다. 폭은 눈은 우리가 함께있는 흔적을 지우지 마십시오. 폭설은 우리가 서로에게주는 자국을 지울 수 없습니다. 오늘 밤, 잔디가 분리되고 밝은 달의 밤은 가을 바람이 올 때까지 기다릴 수있는 수천 마일을 보내게됩니다. "데이터 원산지 제작 ="비를 끓일 시간 "> 클릭하여로드 </a>
<strong> js 초기화 : </strong> <script type = "text/javaScript"> $ ( "#a_pop"). popover (); </스크립트>
미리보기 효과 :
배치가 지정되면 방향 문제에 특별한주의를 기울이십시오. 팝업 상자가 트리거 이벤트 요소의 중심으로 나타나기 시작하므로 덮어 쓰기가 모두 표시 될 수 있으며 모든 표시를 표시 할 수 없습니다.
코드의 A 태그 href 속성은 링크 효과를 제거하려면 javaScript : void (0)로 지정되어야합니다.
네 방향 :
암호
<a href = "javaScript : void (0)"id = "a_pop1"data-placement = "left"data-content = "Wind and Rain은 백마를 따라 잡기 위해 시간을 보내는 시간과 같습니다. 당신은 여전히 젊은 손바닥에서 잠을 자고 있습니까? <a href = "javaScript : void (0)"id = "a_pop2"data-placement = "top"data-content = "우리는 우리가 분리해서는 안된다고 말했고, 우리는 항상 시간이 지남에 따라 적들이더라도 우리가 머리카락을 떠나더라도 우리가 머리카락을 날려 버리더라도 우리가 함께 갈 것이라고 기억 하시겠습니까?" Data-Original-Title = "끓는 시간"> 상단 </a> <a href = "javaScript : void (0)"id = "a_pop3"data-procement = "than bottom"data-content = "그 해에 한여름의 무한한 소원은 손을 잡고 강을 건너겠다고 말했습니다. 이제 우리는 항상 분리해야한다고 말했습니다. 단어." Data-Original-Title = "끓는 시간"> Lower </a> <a href = "javaScript : void (0)"id = "a_pop4"data-prolement = "Right"Data-Content = "Innocent 년은 젊음을 속이는 데 어려움을 겪을 수 없습니다. 나는 당신에게 올라갈 것입니다. 나는 우리가 서로 어울리지 않을 것입니다. 우리가 서로 흔들리지 않을 것입니다. 오늘 밤, 잔디는 밝은 달을 떠나 내년에 가을 바람이 상승하기 위해 수천 마일을 보냅니다. $ ( "#a_pop2"). popover (); $ ( "#a_pop3"). popover (); $ ( "#a_pop4"). popover (); </스크립트>
미리보기 효과;
2. 옵션
데이터 속성 또는 JavaScript를 통해 옵션을 전달할 수 있습니다. 데이터 속성의 경우 Data-Animation = ""와 같은 데이터 다음에 옵션 이름을 넣어야합니다.
단일 팝업 박스에 데이터 속성을 적용하십시오
단일 팝업 박스의 경우 위와 같이 데이터 속성을 통해 별도로 옵션을 지정할 수 있습니다.
3. 방법
$ (). Popover (옵션)
요소 세트의 팝업 상자를 초기화합니다.
.popover ( 'show')
팝업 상자를 보여줍니다.
$ ( '#element'). Popover ( 'show')
.popover ( '숨기기')
팝업 박스를 숨 깁니다.
$ ( '#element'). Popover ( 'Hide')
.popover ( '토글')
팝업 상자를 보여 주거나 숨기십시오.
$ ( '#element'). Popover ( '토글')
.popover ( 'Destroy')
팝업 박스를 숨기고 파괴하십시오.
$ ( '#element'). Popover ( 'Destroy')
IV. 이벤트
$ ( '#mypopover'). on ( 'hidden.bs.popover', function () {// 뭔가…여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위는이 기사에 관한 것입니다. 모든 사람들이 부트 스트랩 팝업 박스를 배우고 마스터하는 것이 도움이되기를 바랍니다.