> 웹 프론트엔드 > JS 튜토리얼 > BootStrap의 팝업 상자(Popover)는 팝업 레이어 위로 마우스 이동을 지원합니다. 팝업 창 레이어가 숨겨지지 않는 이유와 해결 방법.

BootStrap의 팝업 상자(Popover)는 팝업 레이어 위로 마우스 이동을 지원합니다. 팝업 창 레이어가 숨겨지지 않는 이유와 해결 방법.

PHPz
풀어 주다: 2018-09-28 14:44:16
원래의
2642명이 탐색했습니다.

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

1 지연을 설정하세요. 지연 후 팝업창이 이동하지 않으면 팝업창이 숨겨집니다.

Tooltip.prototype.init = function{中的
var triggers = this.options.trigger.split(' ')后面加上
//设置延时
if (this.options.trigger.indexOf('hover') > -1) {
$.extend(true, this.options, { delay: { hide: 100 } });
}
로그인 후 복사

2 컨트롤 불가 사라지는 코드

는 Tooltip.prototype.enter = function(obj)에서

clearTimeout(self.timeout) 뒤에 추가됩니다.

if (self.options.trigger.indexOf('hover') > -1) {
self.$tip.unbind('mouseenter').bind('mouseenter', function (e) {
self.$tip.data('data-element', self.$element);//触发popover框的点击事件时可以获取id
clearTimeout(self.timeout);
self.hoverState = 'in';
}).unbind('mouseleave').bind('mouseleave', function (e) {
self.hoverState = 'out';
self.timeout = setTimeout(function () {
if (self.hoverState == 'out') self.hide()
}, self.options.delay.hide)
})
}
로그인 후 복사
다음은 팝업박스(팝오버) 사용법에 대한 보충설명입니다

팝업박스(팝오버) 플러그인은 콘텐츠를 생성합니다 그리고 요구 사항에 따라 태그를 지정합니다. 기본적으로 팝오버는 트리거 요소 뒤에 배치됩니다. 두 가지 방법으로 팝오버를 추가할 수 있습니다:

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


JavaScript를 통해: JavaScript를 통해 팝오버 활성화:
<a href="#" data-toggle="popover" title="Example popover">
请悬停在我的上面
</a>
로그인 후 복사
팝오버 플러그인은 이전에 설명한 드롭다운 메뉴와 다릅니다. 다른 플러그인과 마찬가지로 순수한 CSS 플러그인이 아닙니다. 플러그인을 사용하려면 jquery(javascript 읽기)를 사용하여 활성화해야 합니다. 페이지의 모든 팝오버를 활성화하려면 다음 스크립트를 사용하십시오.

$(&#39;#identifier&#39;).popover(options)
로그인 후 복사

위는 이 기사의 전체 내용입니다. 더 많은 관련 튜토리얼을 보려면
Bootstrap 비디오 튜토리얼을 방문하세요.
$(function () { $("[data-toggle=&#39;popover&#39;]").popover(); });
로그인 후 복사
!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿