페이지의 아무 곳이나 클릭하여 Twitter Bootstrap 팝 오버를 닫으려면 어떻게해야합니까?

현재 트위터 부트 스트랩으로 팝 오버를 사용하고 있습니다.

$('.popup-marker').popover({
        html: true,
        trigger: 'manual'
    }).click(function(e) {
        $(this).popover('toggle');
        e.preventDefault();
    });

보시다시피, 수동으로 트리거되고 .popup-marker (배경 이미지가있는 div)를 클릭하면 팝 오버가 토글됩니다. 이것은 훌륭하게 작동하지만 페이지의 다른 곳에서 클릭으로 팝 오버를 닫을 수 있기를 원합니다 (그러나 팝 오버 자체는 아닙니다!).

나는 다음을 포함하여 몇 가지 다른 것을 시도했지만 결과를 보여주지 못했습니다.

$('body').click(function(e) {
    $('.popup-marker').popover('hide');
});

페이지의 다른 곳을 클릭하면 팝 오버를 닫을 수 있지만 팝 오버 자체를 클릭하면 어떻게됩니까?

언제든지 하나의 팝 오버 만 표시 될 수 있다고 가정하면 플래그 세트를 사용하여 팝 오버가 표시 될 때 표시 한 다음 숨길 수 있습니다.

문서 본문에서 이벤트 리스너를 설정하면 '팝업 마커'로 표시된 요소를 클릭 할 때 트리거됩니다. 따라서 stopPropagation()이벤트 객체 를 호출해야 합니다. 팝 오버 자체를 클릭 할 때 동일한 트릭을 적용하십시오.

아래는이 작업을 수행하는 JavaScript 코드입니다. jQuery> = 1.7을 사용합니다.

jQuery(function() {
    var isVisible = false;

    var hideAllPopovers = function() {
       $('.popup-marker').each(function() {
            $(this).popover('hide');
        });  
    };

    $('.popup-marker').popover({
        html: true,
        trigger: 'manual'
    }).on('click', function(e) {
        // if any other popovers are visible, hide them
        if(isVisible) {
            hideAllPopovers();
        }

        $(this).popover('show');

        // handle clicking on the popover itself
        $('.popover').off('click').on('click', function(e) {
            e.stopPropagation(); // prevent event for bubbling up => will not get caught with document.onclick
        });

        isVisible = true;
        e.stopPropagation();
    });


    $(document).on('click', function(e) {
        hideAllPopovers();
        isVisible = false;
    });
});

http://jsfiddle.net/AFffL/539/

유일한 경고는 동시에 2 개의 팝 오버를 열 수 없다는 것입니다. 그러나 어쨌든 그것은 사용자에게 혼란 스러울 것이라고 생각합니다 :-)

이것은 훨씬 쉽다 :

$('html').click(function(e) {
    $('.popup-marker').popover('hide');
});

$('.popup-marker').popover({
    html: true,
    trigger: 'manual'
}).click(function(e) {
    $(this).popover('toggle');
    e.stopPropagation();
});

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

플러그인은 여기에서 찾을 수 있습니다 .

사용 예

<button rel="clickover" data-content="Show something here. 
    <button data-dismiss='clickover'
    >Close Clickover</button>"
>Show clickover</button>

자바 스크립트 :

// load click overs using 'rel' attribute
$('[rel="clickover"]').clickover();

허용 된 솔루션으로 몇 가지 문제가 발생했습니다 (열린 팝 오버의 '.popup-marker'요소를 클릭하면 팝 오버가 나중에 작동하지 않습니다). 나는 나를 위해 완벽하게 작동하는이 다른 솔루션을 생각해 냈고 매우 간단합니다 (Bootstrap 2.3.1을 사용하고 있습니다).

$('.popup-marker').popover({
    html: true,
    trigger: 'manual'
}).click(function(e) {
    $('.popup-marker').not(this).popover('hide');
    $(this).popover('toggle');
});
$(document).click(function(e) {
    if (!$(e.target).is('.popup-marker, .popover-title, .popover-content')) {
        $('.popup-marker').popover('hide');
    }
});

업데이트 :이 코드는 Bootstrap 3에서도 작동합니다!

http://getbootstrap.com/javascript/#popovers "다음 클릭시 무시"를 읽으십시오.

다음 번 클릭시 포커스 트리거를 사용하여 팝 오버를 해제 할 수 있지만 <a>태그가 아닌 <button>태그를 사용해야하며 tabindex속성 도 포함해야 합니다.

예:

<a href="#" tabindex="0" class="btn btn-lg btn-danger"
  data-toggle="popover" data-trigger="focus" title="Dismissible popover"
  data-content="And here's some amazing content. It's very engaging. Right?">
  Dismissible popover
</a>

기존의 모든 답변은 모든 문서 이벤트를 캡처 한 다음 활성 팝 오버를 찾거나에 대한 호출을 수정하므로 상당히 약 합니다 .popover().

훨씬 더 좋은 방법은 show.bs.popover문서 본문의 이벤트 를 듣고 그에 따라 반응하는 것입니다. 아래는 문서를 클릭하거나 esc눌렀을 때 팝업을 닫고 팝 오버가 표시 될 때 이벤트 리스너 만 바인딩 하는 코드입니다 .

function closePopoversOnDocumentEvents() {
  var visiblePopovers = [];

  var $body = $("body");

  function hideVisiblePopovers() {
    $.each(visiblePopovers, function() {
      $(this).popover("hide");
    });
  }

  function onBodyClick(event) {
    if (event.isDefaultPrevented())
      return;

    var $target = $(event.target);
    if ($target.data("bs.popover"))
      return;

    if ($target.parents(".popover").length)
      return;

    hideVisiblePopovers();
  }

  function onBodyKeyup(event) {
    if (event.isDefaultPrevented())
      return;

    if (event.keyCode != 27) // esc
      return;

    hideVisiblePopovers();
    event.preventDefault();
  }

  function onPopoverShow(event) {
    if (!visiblePopovers.length) {
      $body.on("click", onBodyClick);
      $body.on("keyup", onBodyKeyup);
    }
    visiblePopovers.push(event.target);
  }

  function onPopoverHide(event) {
    var target = event.target;
    var index = visiblePopovers.indexOf(target);
    if (index > -1) {
      visiblePopovers.splice(index, 1);
    }
    if (visiblePopovers.length == 0) {
      $body.off("click", onBodyClick);
      $body.off("keyup", onBodyKeyup);
    }
  }

  $body.on("show.bs.popover", onPopoverShow);
  $body.on("hide.bs.popover", onPopoverHide);
}

https://github.com/lecar-red/bootstrapx-clickover

그것은 트위터 부트 스트랩 팝 오버의 확장이며 문제를 매우 간단하게 해결할 것입니다.

어떤 이유로 든 다른 솔루션 중 어느 것도 나를 위해 일하지 않았습니다. 그러나 많은 문제 해결 후 마침내 완벽하게 작동하는이 방법에 도달했습니다 (적어도 나를 위해).

$('html').click(function(e) {
  if( !$(e.target).parents().hasClass('popover') ) {
    $('#popover_parent').popover('destroy');
  }
});

제 경우에는 팝 오버를 테이블에 추가하고 td클릭 한 테이블 위 / 아래에 절대적으로 배치했습니다 . 테이블 선택은 jQuery-UI Selectable에 의해 처리되었으므로 간섭이 있는지 확실하지 않습니다. 그러나 팝 오버 내부를 클릭 할 때마다 대상으로 한 클릭 핸들러가 $('.popover')작동하지 않고 이벤트 처리가 항상 $(html)클릭 핸들러에 위임되었습니다 . JS를 처음 접했을 때 뭔가 빠진 것 같습니다.

어쨌든 나는 이것이 누군가를 돕기를 바랍니다!

나는 모든 팝 오버 앵커에게 수업을 제공한다 activate_popover. 한 번에 모두 활성화합니다

$('body').popover({selector: '.activate-popover', html : true, container: 'body'})

커피 스크립트에서 사용하는 클릭 기능을 작동 시키려면 :

$(document).on('click', (e) ->
  clickedOnActivate = ($(e.target).parents().hasClass("activate-popover") || $(e.target).hasClass("activate-popover"))
  clickedAway = !($(e.target).parents().hasClass("popover") || $(e.target).hasClass("popover"))
if clickedAway && !clickedOnActivate
  $(".popover.in").prev().popover('hide')
if clickedOnActivate 
  $(".popover.in").prev().each () ->
    if !$(this).is($(e.target).closest('.activate-popover'))
      $(this).popover('hide')
)

부트 스트랩 2.3.1에서 완벽하게 작동합니다.

여기에 많은 솔루션이 있지만 내 제안을하고 싶습니다. 모든 솔루션을 해결할 수있는 솔루션이 있는지 모르겠지만 3 가지를 시도했는데 클릭과 같은 문제가 있습니다. 자기가 숨길 만드는 팝 오버, 다른 사람들이 내가 한 경우 다른 팝 오버 버튼을 모두 클릭 한 것을 / 여러 popovers 여전히 (선택한 솔루션처럼) 나타날 것에, 어떻게 지금, 이 사람은 모두 그것을 고정

var curr_popover_btn = null;
// Hide popovers function
function hide_popovers(e)
{
    var container = $(".popover.in");
    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        if( curr_popover_btn != null )
        {
            $(curr_popover_btn).popover('hide');
            curr_popover_btn = null;
        }
        container.hide();
    }
}
// Hide popovers when out of focus
$('html').click(function(e) {
    hide_popovers(e);
});
$('.popover-marker').popover({
    trigger: 'manual'
}).click(function(e) {
    hide_popovers(e);
    var $popover_btns = $('.popover-marker');
    curr_popover_btn = this;
    var $other_popover_btns = jQuery.grep($($popover_btns), function(popover_btn){
                return ( popover_btn !== curr_popover_btn );
            });
    $($other_popover_btns).popover('hide');
    $(this).popover('toggle');
    e.stopPropagation();
});

새로 만든 팝 오버에 포커스를 설정하고 블러시 제거합니다. 그렇게하면 어떤 DOM 요소를 클릭했는지, 팝 오버를 클릭하고, 선택할 수도 있는지 확인할 필요가 없습니다. 포커스를 잃지 않고 사라지지 않습니다.

코드:

    $('.popup-marker').popover({
       html: true,
       trigger: 'manual'
    }).click(function(e) {
       $(this).popover('toggle');
       // set the focus on the popover itself 
       jQuery(".popover").attr("tabindex",-1).focus();
       e.preventDefault();
    });

    // live event, will delete the popover by clicking any part of the page
    $('body').on('blur','.popover',function(){
       $('.popup-marker').popover('hide');
    });

도움이 될 수 있다면 나를 위해 잘 작동 한 솔루션이 있습니다.

/**
* Add the equals method to the jquery objects
*/
$.fn.equals = function(compareTo) {
  if (!compareTo || this.length !== compareTo.length) {
    return false;
  }
  for (var i = 0; i < this.length; ++i) {
    if (this[i] !== compareTo[i]) {
      return false;
    }
  }
  return true;
};

/**
 * Activate popover message for all concerned fields
 */
var popoverOpened = null;
$(function() { 
    $('span.btn').popover();
    $('span.btn').unbind("click");
    $('span.btn').bind("click", function(e) {
        e.stopPropagation();
        if($(this).equals(popoverOpened)) return;
        if(popoverOpened !== null) {
            popoverOpened.popover("hide");            
        }
        $(this).popover('show');
        popoverOpened = $(this);
        e.preventDefault();
    });

    $(document).click(function(e) {
        if(popoverOpened !== null) {
            popoverOpened.popover("hide");   
            popoverOpened = null;
        }        
    });
});

가치있는 것에 대한 내 해결책은 다음과 같습니다.

// Listen for clicks or touches on the page
$("html").on("click.popover.data-api touchend.popover.data-api", function(e) {

  // Loop through each popover on the page
  $("[data-toggle=popover]").each(function() {

    // Hide this popover if it's visible and if the user clicked outside of it
    if ($(this).next('div.popover:visible').length && $(".popover").has(e.target).length === 0) {
      $(this).popover("hide");
    }

  });
});

부트 스트랩 2.3.2에서 작동시키는 데 문제가있었습니다. 그러나 나는 이것을 이렇게 썼다.

$(function () {
  $(document).mouseup(function (e) {
        if(($('.popover').length > 0) && !$(e.target).hasClass('popInfo')) {
            $('.popover').each(function(){
                $(this).prev('.popInfo').popover('hide');
            });
        }
    });

    $('.popInfo').popover({
        trigger: 'click',
        html: true
    });
});

@David Wolever 솔루션을 약간 조정했습니다.

function closePopoversOnDocumentEvents() {
  var visiblePopovers = [];

  var $body = $("body");

  function hideVisiblePopovers() {
    /* this was giving problems and had a bit of overhead
      $.each(visiblePopovers, function() {
        $(this).popover("hide");
      });
    */
    while (visiblePopovers.length !== 0) {
       $(visiblePopovers.pop()).popover("hide");
    }
  }

  function onBodyClick(event) {
    if (event.isDefaultPrevented())
      return;

    var $target = $(event.target);
    if ($target.data("bs.popover"))
      return;

    if ($target.parents(".popover").length)
      return;

    hideVisiblePopovers();
  }

  function onBodyKeyup(event) {
    if (event.isDefaultPrevented())
      return;

    if (event.keyCode != 27) // esc
      return;

    hideVisiblePopovers();
    event.preventDefault();
  }

  function onPopoverShow(event) {
    if (!visiblePopovers.length) {
      $body.on("click", onBodyClick);
      $body.on("keyup", onBodyKeyup);
    }
    visiblePopovers.push(event.target);
  }

  function onPopoverHide(event) {
    var target = event.target;
    var index = visiblePopovers.indexOf(target);
    if (index > -1) {
      visiblePopovers.splice(index, 1);
    }
    if (visiblePopovers.length == 0) {
      $body.off("click", onBodyClick);
      $body.off("keyup", onBodyKeyup);
    }
  }

  $body.on("show.bs.popover", onPopoverShow);
  $body.on("hide.bs.popover", onPopoverHide);
}

이 질문도 여기에 요청되었으며 내 대답은 jQuery DOM 순회 방법을 이해하는 방법뿐만 아니라 외부를 클릭하여 팝 오버 종료를 처리하는 두 가지 옵션을 제공합니다.

한 번에 여러 팝 오버를 열거 나 한 번에 하나의 팝 오버를 엽니 다.

또한이 작은 코드 스 니펫은 아이콘이 포함 된 버튼 닫기를 처리 할 수 ​​있습니다!

https://stackoverflow.com/a/14857326/1060487

이것은 매력처럼 작동하며 사용합니다.

클릭하면 팝 오버가 열리고 다시 클릭하면 팝 오버가 닫히고 팝 오버 외부를 클릭하면 팝 오버가 닫힙니다.

이것은 또한 하나 이상의 팝 오버에서 작동합니다.

    function hideAllPopovers(){
    $('[data-toggle="popover"]').each(function() {
        if ($(this).data("showing") == "true"){
            $(this).data("showing", "false");
            $(this).popover('hide');                
        }
    });
}
$('[data-toggle="popover"]').each(function() {
        $(this).popover({
            html: true,
            trigger: 'manual'
        }).click(function(e) {
            if ($(this).data("showing") !=  "true"){
                hideAllPopovers();
                $(this).data("showing", "true");
                $(this).popover('show');
            }else{
                hideAllPopovers();
            }
            e.stopPropagation();
        });
});

$(document).click(function(e) {
    hideAllPopovers();
});

또 다른 해결책은 팝 오버의 자손을 클릭했을 때의 문제를 다루는 것입니다.

$(document).mouseup(function (e) {
    // The target is not popover or popover descendants
    if (!$(".popover").is(e.target) && 0 === $(".popover").has(e.target).length) {
        $("[data-toggle=popover]").popover('hide');
    }
});

아래와 같이하겠습니다

$("a[rel=popover]").click(function(event){
    if(event.which == 1)
    {   
        $thisPopOver = $(this);
        $thisPopOver.popover('toggle');
        $thisPopOver.parent("li").click(function(event){
            event.stopPropagation();
            $("html").click(function(){
                $thisPopOver.popover('hide');
            });
        });
    }
});

도움이 되었기를 바랍니다!

pjax와 함께 트위터 부트 스트랩 팝 오버를 사용하려고하면 이것이 효과가 있습니다.

App.Utils.Popover = {

  enableAll: function() {
    $('.pk-popover').popover(
      {
        trigger: 'click',
        html : true,
        container: 'body',
        placement: 'right',
      }
    );
  },

  bindDocumentClickEvent: function(documentObj) {
    $(documentObj).click(function(event) {
      if( !$(event.target).hasClass('pk-popover') ) {
        $('.pk-popover').popover('hide');
      }
    });
  }

};

$(document).on('ready pjax:end', function() {
  App.Utils.Popover.enableAll();
  App.Utils.Popover.bindDocumentClickEvent(this);
});

@ RayOnAir, 이전 솔루션과 동일한 문제가 있습니다. @RayOnAir 솔루션에도 가깝습니다. 개선 된 한 가지는 다른 팝 오버 마커를 클릭 할 때 이미 열린 팝 오버입니다. 그래서 내 코드는 다음과 같습니다

var clicked_popover_marker = null;
var popover_marker = '#pricing i';

$(popover_marker).popover({
  html: true,
  trigger: 'manual'
}).click(function (e) {
  clicked_popover_marker = this;

  $(popover_marker).not(clicked_popover_marker).popover('hide');
  $(clicked_popover_marker).popover('toggle');
});

$(document).click(function (e) {
  if (e.target != clicked_popover_marker) {
    $(popover_marker).popover('hide');
    clicked_popover_marker = null;
  }
});

그의 솔루션이 'popup-marker'클래스의 모든 요소에서 popover ( 'hide')를 활성화했기 때문에 위의 pbaron 제안의 수정 된 솔루션 인 것으로 나타났습니다. 그러나 데이터 컨텐츠 대신 html 컨텐츠에 popover ()를 사용하면 아래에서 수행하는 것처럼 html 팝업 내부의 클릭이 실제로 popover ( 'hide')를 활성화하여 창을 즉시 닫습니다. 아래의이 방법은 각 .popup-marker 요소를 반복하여 부모가 클릭 한 .popup-marker의 ID와 관련이 있는지 먼저 감지하고, 그렇지 않으면 숨기지 않습니다. 다른 모든 div는 숨겨져 있습니다 ...

        $(function(){
            $('html').click(function(e) {
                // this is my departure from pbaron's code above
                // $('.popup-marker').popover('hide');
                $('.popup-marker').each(function() {
                    if ($(e.target).parents().children('.popup-marker').attr('id')!=($(this).attr('id'))) {
                        $(this).popover('hide');
                    }
                });
            });

            $('.popup-marker').popover({
                html: true,
                // this is where I'm setting the html for content from a nearby hidden div with id="html-"+clicked_div_id
                content: function() { return $('#html-'+$(this).attr('id')).html(); },
                trigger: 'manual'
            }).click(function(e) {
                $(this).popover('toggle');
                e.stopPropagation();
            });
        });

나는 이것을 생각해 냈다.

내 시나리오에는 동일한 페이지에 더 많은 팝 오버가 포함되어 있었으므로 숨기면 보이지 않게 되었기 때문에 팝 오버 뒤에있는 항목을 클릭 할 수 없었습니다. 아이디어는 특정 팝 오버 링크를 '활성'으로 표시 한 다음 활성 팝 오버를 '토글'하는 것입니다. 그렇게하면 팝 오버가 완전히 닫힙니다.

$('.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"

간단한 문제에 대한 간단한 해결책을 만들려고했습니다. 위의 게시물은 훌륭하지만 간단한 문제로 인해 복잡합니다. 그래서 나는 간단한 것을 만들었습니다. 닫기 버튼을 추가했습니다. 나에게 완벽합니다.

            $(".popover-link").click(function(){
                $(".mypopover").hide();
                $(this).parent().find(".mypopover").show();
        })
        $('.close').click(function(){
    $(this).parents('.mypopover').css('display','none');
});



          <div class="popover-content">
        <i class="fa fa-times close"></i>
    <h3 class="popover-title">Title here</h3>
your other content here
        </div>


   .popover-content {
    position:relative;
    }
    .close {
        position:absolute;
        color:#CCC;
        right:5px;
        top:5px;
        cursor:pointer;
    }

간단하지만 효과적입니다 ..

var openPopup;

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

    }
    openPopup=this;
});

btn-popover팝 오버를 여는 팝 오버 버튼 / 링크에 클래스를 추가하십시오 . 이 코드는 외부를 클릭하면 팝 오버를 닫습니다.

$('body').on('click', function(event) {
  if (!$(event.target).closest('.btn-popover, .popover').length) {
    $('.popover').popover('hide');
  }
});

더 쉬운 솔루션은 모든 팝 오버를 반복하고 그렇지 않은 경우 숨길 수 this있습니다.

$(document).on('click', '.popup-marker', function() {
    $(this).popover('toggle')
})

$(document).bind('click touchstart', function(e) {
    var target = $(e.target)[0];
    $('.popup-marker').each(function () {
        // hide any open popovers except for the one we've clicked
        if (!$(this).is(target)) {
            $(this).popover('hide');
        }
    });
});

$('.popForm').popover();

$('.conteneurPopForm').on("click",".fermePopover",function(){
    $(".popForm").trigger("click");
});

명확하게하려면 팝 오버를 트리거하십시오.

이것은 부트 스트랩 4에서 작동합니다.

$("#my-popover-trigger").popover({
  template: '<div class="popover my-popover-content" role="tooltip"><div class="arrow"></div><div class="popover-body"></div></div>',
  trigger: "manual"
})

$(document).click(function(e) {
  if ($(e.target).closest($("#my-popover-trigger")).length > 0) {
    $("#my-popover-trigger").popover("toggle")
  } else if (!$(e.target).closest($(".my-popover-content")).length > 0) {
    $("#my-popover-trigger").popover("hide")
  }
})

설명:

• 첫 번째 섹션은 문서에 따라 팝 오버를 시작합니다. https://getbootstrap.com/docs/4.0/components/popovers/
• 두 번째 섹션의 첫 번째 "if"는 클릭 한 요소가 # my-popover-trigger의 하위 항목인지 확인합니다. 이것이 참이면 팝 오버를 토글합니다 (트리거에서 클릭을 처리합니다).
• 두 번째 섹션의 두 번째 "if"는 클릭 한 요소가 init 템플릿에 정의 된 팝 오버 컨텐츠 클래스의 하위 항목인지 확인합니다. 그렇지 않은 경우 클릭이 팝 오버 컨텐츠 내부에 있지 않았으며 팝 오버를 숨길 수 있음을 의미합니다.

data-trigger="focus"대신 사용해보십시오"click" .

이것은 나를 위해 문제를 해결했습니다.