JS 구성 요소 부트스트랩은 팝업 상자 효과 code_javascript 기술을 구현합니다.

iPad의 효과처럼 페이지 콘텐츠에 작은 오버레이를 추가하여 페이지 요소에 추가 정보를 추가합니다.

플러그인 종속성
팝업 상자는 툴팁 플러그인을 사용하므로 툴팁 플러그인을 먼저 로드해야 합니다.
선택 기능
성능상의 이유로 툴팁 및 팝업 구성 요소의 데이터 속성 API는 선택 사항이므로 직접 초기화해야 합니다.
버튼 그룹과 입력 상자 그룹에서 팝업 상자를 사용할 경우 추가 설정이 필요합니다
팝업을 .btn-group 또는 .input-group과 함께 사용하는 경우 원하지 않는 부작용(예: 팝업이 표시된 후)을 방지하려면 컨테이너: 'body' 옵션(아래 문서 참조)을 지정해야 합니다. , 작동하는 페이지 요소는 더 넓어지거나 모서리가 둥글게 될 수 있습니다.
금지된 페이지 요소에 팝업박스를 사용할 경우, 이를 감싸기 위한 추가 요소를 추가해야 합니다
disable 또는 .disabled 요소에 팝업 상자를 추가하려면 팝업 상자를 추가해야 하는 페이지 요소를 dc6dce4a544fdca2df29d5ac0ea9906b로 묶은 다음 팝업 상자를 이 dc6dce4a544fdca2df29d5ac0ea9906b에 적용하세요. 요소.
1. 정적 사례
4가지 선택 옵션: 위쪽, 오른쪽, 아래쪽, 왼쪽 배열.

코드 스니펫

.bs-example 
  { 
   border-color:#ddd; 
   border-radius:4px 4px 0 0; 
   border-width:1px; 
   box-shadow:none; 
   margin-left:0; 
   margin-right:0; 
   border-style:solid; 
  } 
 .bs-example-popover .popover { 
  position: relative; 
  display: block; 
  float: left; 
  width: 240px; 
  margin: 20px; 
} 

<h1 class="page-header">3、弹出框</h1> 
 <div class="bs-example bs-example-popover"> 
 <div class="popover top"> 
  <div class="arrow"></div> 
  <h3 class="popover-title">Popover top</h3> 
  <div class="popover-content"> 
   <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> 
  </div> 
 </div> 
 <div class="popover right"> 
  <div class="arrow"></div> 
  <h3 class="popover-title">Popover right</h3> 
  <div class="popover-content"> 
   <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> 
  </div> 
  </div> 
 
  <div class="popover bottom"> 
  <div class="arrow"></div> 
  <h3 class="popover-title">Popover bottom</h3> 
 
  <div class="popover-content"> 
   <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> 
  </div> 
  </div> 
 
  <div class="popover left"> 
  <div class="arrow"></div> 
  <h3 class="popover-title">Popover left</h3> 
  <div class="popover-content"> 
   <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> 
  </div> 
  </div> 
 </div> 

미리보기 효과

코드 스니펫:

<a href="javascript:void(0)" id="a_pop" class="btn btn-danger" data-placement="bottom" data-content=" 
 风吹雨成花 时间追不上白马 
你年少掌心的梦话 依然紧握着吗 
云翻涌成夏 眼泪被岁月蒸发 
这条路上的你我她 有谁迷路了吗 
 
我们说好不分离 要一直一直在一起 
就算与时间为敌 就算与全世界背离 
风吹亮雪花 吹白我们的头发 
当初说一起闯天下 你们还记得吗 
 
那一年盛夏 心愿许的无限大 
我们手拉手也成舟 划过悲伤河流 
 
你曾说过不分离 要一直一直在一起 
现在我想问问你 是否只是童言无忌 
 
天真岁月不忍欺 青春荒唐我不负你 
大雪求你别抹去 我们在一起的痕迹 
 
大雪也无法抹去 我们给彼此的印记 
今夕何夕 青草离离 
明月夜送君千里 等来年 秋风起" 
 data-original-title="时间煮雨" 
 >点击加载</a> 

<strong>js初始化：</strong> 
<script type="text/javascript"> 
 $("#a_pop").popover(); 
</script> 

미리보기 효과:

배치 지정 시 방향에 특히 주의하세요. 팝업박스는 이벤트를 발생시키는 요소의 중앙부터 팝업되기 때문에 가려져 완전히 표시되지 않을 수 있습니다.

링크 효과를 제거하려면 코드에 있는 a 태그의 href 속성을 javascript:void(0)로 지정해야 합니다.

네 방향:

코드

<a href="javascript:void(0)" id="a_pop1" class="btn btn-danger" data-placement="left" data-content= 
 " 
 风吹雨成花 时间追不上白马 
 你年少掌心的梦话 依然紧握着吗 
 云翻涌成夏 眼泪被岁月蒸发 
 这条路上的你我她 有谁迷路了吗 
 " 
 data-original-title="时间煮雨" 
 >左侧</a> 
 <a href="javascript:void(0)" id="a_pop2" class="btn btn-danger" data-placement="top" data-content= 
 " 
我们说好不分离 要一直一直在一起 
就算与时间为敌 就算与全世界背离 
风吹亮雪花 吹白我们的头发 
当初说一起闯天下 你们还记得吗 
 " data-original-title="时间煮雨"> 
 上部 
 </a> 
 <a href="javascript:void(0)" id="a_pop3" class="btn btn-danger" data-placement="bottom" data-content= 
 " 
那一年盛夏 心愿许的无限大 
我们手拉手也成舟 划过悲伤河流 
你曾说过不分离 要一直一直在一起 
现在我想问问你 是否只是童言无忌 
 " data-original-title="时间煮雨"> 
 下部 
 </a> 
 <a href="javascript:void(0)" id="a_pop4" class="btn btn-danger" data-placement="right" data-content= 
 " 
 天真岁月不忍欺 青春荒唐我不负你 
大雪求你别抹去 我们在一起的痕迹 
大雪也无法抹去 我们给彼此的印记 
今夕何夕 青草离离 
明月夜送君千里 等来年 秋风起 
 " data-original-title="时间煮雨"> 
 右侧 
 </a> 
 </div> 
 <script type="text/javascript"> 
  $("#a_pop1").popover(); 
  $("#a_pop2").popover(); 
  $("#a_pop3").popover(); 
  $("#a_pop4").popover(); 
 </script> 

미리보기 효과

2. 옵션
옵션은 데이터 속성이나 JavaScript를 통해 전달될 수 있습니다. 데이터 속성의 경우 data-animation=""처럼 data- 뒤에 옵션 이름을 입력해야 합니다.

단일 팝업 상자에 데이터 속성 적용
단일 팝업 상자의 경우 위에 표시된 대로 데이터 속성을 통해 옵션을 개별적으로 지정할 수 있습니다.

3. 방법
$().popover(옵션)

요소 집합에 대한 팝업 상자를 초기화합니다.

.popover('표시')

팝업 표시.

$('#element').popover('show')
.popover('숨기기')

팝업을 숨깁니다.

$('#element').popover('hide')
.popover('토글')

팝업을 표시하거나 숨깁니다.

$('#element').popover('toggle')
.popover('파괴')

팝업을 숨기고 파괴하세요.

$('#element').popover('destroy')

4. 이벤트

$('#myPopover').on('hidden.bs.popover',
function
() {
//
 do something…})

위 내용은 이 글의 전체 내용입니다. 모든 분들이 부트스트랩 팝업 상자를 배우고 익히는 데 도움이 되길 바랍니다.