모달과 같은 방식으로 팝 오버를 해제 할 수 있습니까? 사용자가 외부에서 클릭하면 닫히도록 하시겠습니까?

불행히도 나는 popover 대신 실제 모달을 사용할 수 없습니다. 모달은 위치 : 고정을 의미하고 더 이상 팝 오버가 아니기 때문입니다. :(

업데이트 : 약간 더 강력한 솔루션 : http://jsfiddle.net/mattdlockyer/C5GBU/72/

텍스트 만 포함 된 버튼의 경우 :

$('body').on('click', function (e) {
    //did not click a popover toggle or popover
    if ($(e.target).data('toggle') !== 'popover'
        && $(e.target).parents('.popover.in').length === 0) { 
        $('[data-toggle="popover"]').popover('hide');
    }
});

아이콘 이 포함 된 버튼 사용 (이 코드에는 Bootstrap 3.3.6에 버그가 있음,이 답변의 아래 수정 사항 참조)

$('body').on('click', function (e) {
        //did not click a popover toggle, or icon in popover toggle, or popover
        if ($(e.target).data('toggle') !== 'popover'
            && $(e.target).parents('[data-toggle="popover"]').length === 0
            && $(e.target).parents('.popover.in').length === 0) { 
            $('[data-toggle="popover"]').popover('hide');
        }
    });

JS 생성 팝 오버'[data-original-title]' 대신 사용'[data-toggle="popover"]'

주의 사항 : 위의 솔루션을 통해 여러 팝 오버를 한 번에 열 수 있습니다.

한 번에 한 번의 팝 오버 :

업데이트 : Bootstrap 3.0.x, 코드 또는 바이올린 참조 http://jsfiddle.net/mattdlockyer/C5GBU/2/

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

이것은 이미 열려 있고 클릭하지 않았거나 링크를 클릭하지 않은 팝 오버 닫기를 처리합니다.

업데이트 : Bootstrap 3.3.6, 바이올린 참조

닫은 후 다시 열려면 2 번 클릭하는 문제가 해결되었습니다.

$(document).on('click', function (e) {
    $('[data-toggle="popover"],[data-original-title]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {                
            (($(this).popover('hide').data('bs.popover')||{}).inState||{}).click = false  // fix for BS 3.3.6
        }

    });
});

업데이트 : 이전 개선 조건을 사용 하여이 솔루션을 달성했습니다. 더블 클릭 및 고스트 팝 오버 문제를 해결하십시오.

$(document).on("shown.bs.popover",'[data-toggle="popover"]', function(){
    $(this).attr('someattr','1');
});
$(document).on("hidden.bs.popover",'[data-toggle="popover"]', function(){
    $(this).attr('someattr','0');
});
$(document).on('click', function (e) {
    $('[data-toggle="popover"],[data-original-title]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            if($(this).attr('someattr')=="1"){
                $(this).popover("toggle");
            }
        }
    });
});

$('html').on('mouseup', function(e) {
    if(!$(e.target).closest('.popover').length) {
        $('.popover').each(function(){
            $(this.previousSibling).popover('hide');
        });
    }
});

팝 오버를 제외한 아무 곳이나 클릭하면 모든 팝 오버가 닫힙니다.

부트 스트랩 4.1 업데이트

$("html").on("mouseup", function (e) {
    var l = $(e.target);
    if (l[0].className.indexOf("popover") == -1) {
        $(".popover").each(function () {
            $(this).popover("hide");
        });
    }
});

가장 단순하고 가장 안전한 버전 은 모든 부트 스트랩 버전과 호환됩니다.

데모 : http://jsfiddle.net/guya/24mmM/

데모 2 : 팝 오버 컨텐츠 내부를 클릭 할 때 닫히지 않음 http://jsfiddle.net/guya/fjZja/

데모 3 : 여러 팝 오버 : http://jsfiddle.net/guya/6YCjW/

이 회선을 호출하면 모든 팝 오버가 해제됩니다.

$('[data-original-title]').popover('hide');

이 코드로 외부를 클릭하면 모든 팝 오버를 해제하십시오.

$('html').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined') {
    $('[data-original-title]').popover('hide');
  }
});

위의 스 니펫은 본문에 클릭 이벤트를 첨부합니다. 사용자가 팝 오버를 클릭하면 정상적으로 작동합니다. 사용자가 팝 오버가 아닌 것을 클릭하면 모든 팝 오버가 닫힙니다.

작동하지 않는 다른 예제와 달리 Javascript로 시작되는 팝 오버에서도 작동합니다. (데모 참조)

팝 오버 컨텐츠 내부를 클릭 할 때 해제하지 않으려면이 코드를 사용하십시오 (두 번째 데모 링크 참조).

$('html').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined' && !$(e.target).parents().is('.popover.in')) {
    $('[data-original-title]').popover('hide');
  }
});

부트 스트랩 2.3.2를 사용하면 트리거를 '포커스'로 설정할 수 있으며 작동합니다.

$('#el').popover({trigger:'focus'});

이것은 기본적으로 매우 복잡하지는 않지만 결함을 피하기 위해 확인해야 할 사항이 있습니다.

데모 (jsfiddle)

var $poped = $('someselector');

// Trigger for the popover
$poped.each(function() {
    var $this = $(this);
    $this.on('hover',function() {
            var popover = $this.data('popover');
            var shown = popover && popover.tip().is(':visible');
            if(shown) return;        // Avoids flashing
            $this.popover('show');
    });
});

// Trigger for the hiding
 $('html').on('click.popover.data-api',function() {
    $poped.popover('hide');
});

투표율이 높은 솔루션 중 어느 것도 나를 위해 올바르게 작동하지 않았습니다. 팝 오버를 처음 열고 닫은 후 (다른 요소를 클릭하여) 버그가 발생하면 두 번 만들 때까지 다시 열리지 않습니다. 발생하면 트리거 링크를 하나 클릭하는 대신 번 클릭 .

그래서 약간 수정했습니다.

$(document).on('click', function (e) {
    var
        $popover,
        $target = $(e.target);

    //do nothing if there was a click on popover content
    if ($target.hasClass('popover') || $target.closest('.popover').length) {
        return;
    }

    $('[data-toggle="popover"]').each(function () {
        $popover = $(this);

        if (!$popover.is(e.target) &&
            $popover.has(e.target).length === 0 &&
            $('.popover').has(e.target).length === 0)
        {
            $popover.popover('hide');
        } else {
            //fixes issue described above
            $popover.popover('toggle');
        }
    });
})

나는 그것을하는 방법을 보여주기 위해 jsfiddle을 만들었습니다.

http://jsfiddle.net/3yHTH/

아이디어는 버튼을 클릭하면 팝 오버를 표시하고 버튼 외부를 클릭하면 팝 오버를 숨기는 것입니다.

HTML

<a id="button" href="#" class="btn btn-danger">Click for popover</a>

JS

$('#button').popover({
    trigger: 'manual',
    position: 'bottom',
    title: 'Example',
    content: 'Popover example for SO'
}).click(function(evt) {
    evt.stopPropagation();
    $(this).popover('show');
});

$('html').click(function() {
    $('#button').popover('hide');
});

이 속성을 요소와 함께 추가하기 만하면됩니다.

data-trigger="focus"

이것은 전에 여기 에 요청되었습니다 . 내가 준 동일한 대답이 여전히 적용됩니다.

비슷한 요구가 있었고 Lee Carmichael의 BootstrapX-clickover라는 Twitter Bootstrap Popover의 작은 확장 기능을 발견했습니다 . 또한 여기에 몇 가지 사용 예가 있습니다 . 기본적으로 팝업을 대화 형 구성 요소로 변경하면 페이지의 다른 곳을 클릭하거나 팝업 내 닫기 버튼을 클릭하면 닫힙니다. 또한 여러 팝 오버가 한 번에 열리고 다른 멋진 기능도 많이 제공됩니다.

이 파티에 늦었지만 ... 나는 그것을 공유 할 것이라고 생각했다. 나는 팝 오버를 좋아하지만 내장 기능이 거의 없습니다. 나는 팝 오버가되고 싶은 모든 부트 스트랩 확장 .bubble ()을 작성했습니다. 해고하는 네 가지 방법. 외부를 클릭하고 링크를 전환 한 다음 X를 클릭하고 이스케이프를 누르십시오.

자동으로 배치되므로 페이지를 벗어나지 않습니다.

https://github.com/Itumac/bootstrap-bubble

이것은 무의미한 자기 진흥이 아닙니다 ... 나는 내 인생에서 다른 사람들의 코드를 너무 많이 잡아서 내 자신의 노력을 기울이고 싶었습니다. 소용돌이를주고 그것이 당신에게 효과가 있는지보십시오.

http://getbootstrap.com/javascript/#popovers 에 따르면 ,

<button type="button" class="popover-dismiss" data-toggle="popover" title="Dismissible popover" data-content="Popover Content">Dismissible popover</button>

사용자가 다음에 클릭 할 때 포커스 트리거를 사용하여 팝 오버를 해제하십시오.

$('.popover-dismiss').popover({
    trigger: 'focus'
})

수정 된 수락 된 솔루션. 내가 경험 한 것은 일부 팝 오버가 숨겨진 후에 다시 표시하려면 두 번 클릭해야한다는 것입니다. 이미 숨겨진 팝 오버에서 popover ( 'hide')가 호출되지 않도록하기 위해 수행 한 작업은 다음과 같습니다.

$('body').on('click', function (e) {
    $('[data-original-title]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            var popoverElement = $(this).data('bs.popover').tip();
            var popoverWasVisible = popoverElement.is(':visible');

            if (popoverWasVisible) {
                $(this).popover('hide');
                $(this).click(); // double clicking required to reshow the popover if it was open, so perform one click now
            }
        }
    });
});

이 속성을 html 요소에 추가하여 다음 클릭에서 팝 오버를 닫으십시오.

data-trigger="focus"

https://getbootstrap.com/docs/3.3/javascript/#popovers 에서 참조

이 솔루션은 잘 작동합니다.

$("body")   .on('click'     ,'[data-toggle="popover"]', function(e) { 
    e.stopPropagation();
});

$("body")   .on('click'     ,'.popover' , function(e) { 
     e.stopPropagation();
});

$("body")   .on('click'  , function(e) {
        $('[data-toggle="popover"]').popover('hide');
});

jQuery("#menu").click(function(){ return false; });
jQuery(document).one("click", function() { jQuery("#menu").fadeOut(); });

이벤트 버블 링을 사용하여 DOM에서 팝업을 제거 할 수도 있습니다. 조금 더럽지 만 잘 작동합니다.

$('body').on('click touchstart', '.popover-close', function(e) {
  return $(this).parents('.popover').remove();
});

html에서 .popover-close 클래스를 popover 내부의 내용에 추가하여 popover를 닫아야합니다.

선택기 위임으로 팝 오버를 만드는 경우 '숨기기'방법이 작동하지 않는 대신 '파괴'를 사용해야합니다.

나는 그것을 그렇게 작동시켰다.

$('body').popover({
    selector: '[data-toggle="popover"]'
});

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('destroy');
        }
    });
});

여기 JSfiddle

@mattdlockyer의 솔루션에 문제가 있음을 알았습니다 (솔루션 감사합니다). 다음과 같이 popover 생성자를 위해 selector 속성을 사용할 때 ...

$(document.body').popover({selector: '[data-toggle=popover]'});

제안 된 BS3 솔루션이 작동하지 않습니다. 대신에 로컬에 두 번째 팝 오버 인스턴스가 작성 $(this)됩니다. 이를 방지하기위한 솔루션은 다음과 같습니다.

$(document.body).on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            var bsPopover = $(this).data('bs.popover'); // Here's where the magic happens
            if (bsPopover) bsPopover.hide();
        }
    });
});

언급 한 바와 같이 $(this).popover('hide');위임 된 리스너로 인해 두 번째 인스턴스가 작성됩니다. 제공된 솔루션은 이미 표시된 팝 오버 만 숨 깁니다.

시간을 절약 할 수 있기를 바랍니다.

부트 스트랩은 기본적으로 이것을 지원합니다 :

JS 빈 데모

다음 클릭시 해제에 필요한 특정 마크 업

적절한 크로스 브라우저 및 크로스 플랫폼 동작의 경우, 사용해야합니다 <a>태그 하지<button> 태그를, 당신은 또한 포함해야 role="button"하고 tabindex속성을.

이 솔루션은 두 번째로 팝 오버를 표시 할 때 성가신 두 번째 클릭을 제거합니다.

Bootstrap v3.3.7로 테스트

$('body').on('click', function (e) {
    $('.popover').each(function () {
        var popover = $(this).data('bs.popover');
        if (!popover.$element.is(e.target)) {
            popover.inState.click = false;
            popover.hide();                
        }
    });
});

나는 이전의 많은 답변을 시도했지만 실제로 아무것도 효과가 없지만이 솔루션은 다음과 같습니다.

https://getbootstrap.com/docs/3.3/javascript/#dismiss-on-next-click

앵커 태그가 아닌 버튼을 사용하고 role = "button"+ data-trigger = "focus"+ tabindex = "0"속성을 관리하는 것이 좋습니다.

전의:

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" 
data-trigger="focus" title="Dismissible popover" data-content="amazing content">
Dismissible popover</a>

나는 이것을 생각해 냈습니다 : 내 시나리오에는 같은 페이지에 더 많은 팝 오버가 포함되어 있었으며 숨기면 보이지 않게되었습니다. 그 때문에 팝 오버 뒤에있는 항목을 클릭 할 수 없었습니다. 아이디어는 특정 팝 오버 링크를 '활성'으로 표시 한 다음 활성 팝 오버를 '토글'하는 것입니다. 그렇게하면 팝 오버가 완전히 닫힙니다 $ ( '. popover-link'). popover ({html : true, container : 'body'})

$('.popover-link').popover().on 'shown.bs.popover', ->
  $(this).addClass('toggled')

$('.popover-link').popover().on 'hidden.bs.popover', ->
  $(this).removeClass('toggled')

$("body").on "click", (e) ->
  $openedPopoverLink = $(".popover-link.toggled")
  if $openedPopoverLink.has(e.target).length == 0
    $openedPopoverLink.popover "toggle"
    $openedPopoverLink.removeClass "toggled"

새 팝 오버가 표시되기 전에 다른 활성 팝 오버를 제거합니다 (부트 스트랩 3).

$(".my-popover").popover();

$(".my-popover").on('show.bs.popover',function () {
    $('.popover.in').remove();
});              

3.3.6으로 테스트되었으며 두 번째 클릭은 정상입니다.

        $('[data-toggle="popover"]').popover()
            .click(function () {
            $(this).popover('toggle');
        });;

        $(document).on('click', function (e) {
            $('[data-toggle="popover"]').each(function () {
                //the 'is' for buttons that trigger popups
                //the 'has' for icons within a button that triggers a popup
                if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
                    $(this).popover('hide');
                }
            });
        });

데모 : http://jsfiddle.net/nessajtr/yxpM5/1/

var clickOver = clickOver || {};
clickOver.uniqueId = $.now();

clickOver.ClickOver = function (selector, options) {
    var self = this;

    //default values
    var isVisible, clickedAway = false;

    var callbackMethod = options.content;
var uniqueDiv = document.createElement("div");
var divId = uniqueDiv.id = ++clickOver.uniqueId;
uniqueDiv.innerHTML = options.loadingContent();

options.trigger = 'manual';
options.animation = false;
options.content = uniqueDiv;

self.onClose = function () {
    $("#" + divId).html(options.loadingContent());
    $(selector).popover('hide')
    isVisible = clickedAway = false;
};
self.onCallback = function (result) {
    $("#" + divId).html(result);
};

$(selector).popover(options);

//events
$(selector).bind("click", function (e) {
    $(selector).filter(function (f) {
        return $(selector)[f] != e.target;
    }).popover('hide');

    $(selector).popover("show");
    callbackMethod(self.onCallback);

    isVisible = !(clickedAway = false);
});

$(document).bind("click", function (e) {
    if (isVisible && clickedAway && $(e.target).parents(".popover").length == 0) {
        self.onClose();
        isVisible = clickedAway = false;
    } else clickedAway = true;
});

}

이것이 나의 해결책입니다.

이 방법을 사용하면 페이지의 아무 곳이나 클릭하여 팝 오버를 닫을 수 있습니다. 다른 클릭 가능한 엔티티를 클릭하면 다른 모든 팝 오버가 숨겨집니다. animation : false가 필요합니다. 그렇지 않으면 콘솔에 jquery .remove 오류가 발생합니다.

$('.clickable').popover({
 trigger: 'manual',
 animation: false
 }).click (evt) ->
  $('.clickable').popover('hide')
  evt.stopPropagation()
  $(this).popover('show')

$('html').on 'click', (evt) ->
  $('.clickable').popover('hide')

Ok 이것은 실제로 stackoverflow에서 무언가에 응답하는 첫 번째 시도이므로 여기에는 아무것도 없습니다 .P

이 기능이 실제로 최신 부트 스트랩에서 즉시 작동한다는 것은 확실하지 않습니다 . 사용자가 클릭 할 수 있습니다. 당신은 넣을 경우 잘 모르겠어요 '클릭 마우스로 가리 키지 만 iPad에서는 클릭이 토글로 작동합니다.

결과적으로 데스크톱에서 마우스를 가져 가거나 클릭 할 수 있습니다 (대부분의 사용자가 마우스를 가져갑니다). 터치 장치에서 요소를 터치하면 요소가 표시되고 다시 터치하면 요소가 삭제됩니다. 물론 이것은 원래 요구 사항과 약간의 타협이지만 최소한 코드는 이제 깨끗합니다. :)

$ ( ". my-popover"). popover ({트리거 : 'click hover'});

Matt Lockyer의 코드를 가져 와서 간단한 재설정을 수행하여 dom이 숨어있는 요소로 덮이지 않도록했습니다.

매트의 코드 : http://mattlockyer.com/2013/04/08/close-a-twitter-bootstrap-popover-when-clicking-outside/

피들 : http://jsfiddle.net/mrsmith/Wd2qS/

    $('body').on('click', function (e) {
    //hide popover from dom to prevent covering elements
    $('.popover').css('display', 'none');
    //bring popover back if trigger element is clicked
    $('[data-toggle="popover"]').each(function () {
        if ($(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $('.popover').css('display', 'block');
        }
    });
    //hide popover with .popover method
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

이것을 시도하면 외부를 클릭하여 숨길 수 있습니다.

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
    //the 'is' for buttons that trigger popups
    //the 'has' for icons within a button that triggers a popup
    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
    $(this).popover('hide');
    }
    });
});

다음과 같은 코드를 사용하여 팝 오버 링크를 동적으로 설정했기 때문에 mattdlockyer의 솔루션에 문제가 발생했습니다.

$('body').popover({
        selector : '[rel="popover"]'
});

그래서 그렇게 수정해야했습니다. 그것은 나를 위해 많은 문제를 해결했습니다.

$('html').on('click', function (e) {
  $('[data-toggle="popover"]').each(function () {
    //the 'is' for buttons that trigger popups
    //the 'has' for icons within a button that triggers a popup
    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
        $(this).popover('destroy');
    }
  });
});

destroy는 요소를 제거하므로 선택기 부분은 팝 오버를 초기화하는 데 중요합니다.