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

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

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

로 묶은 다음 팝업 상자를 이

에 적용하세요. 요소.
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…})

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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

더보기

인기 기사

어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션

3 몇 주 전 By DDD

Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법

2 몇 주 전 By DDD

Atomfall에서 크레인 제어 키 카드를 찾을 수 있습니다

3 몇 주 전 By DDD

어 ass 신 크리드 섀도우 - 대장장이를 찾고 무기 및 갑옷 커스터마 화 잠금 해제 방법

1 몇 달 전 By DDD

<s> : 데드 레일 - 모든 도전을 완료하는 방법

3 몇 주 전 By DDD

더보기

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

더보기

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7621

15

Cakephp 튜토리얼

1389

52

Steam의 계정 이름 형식은 무엇입니까?

89

11

Win11 활성화 키 영구

70

19

NYT 연결 힌트와 답변

31

136

더보기