Javascript 单击外部时隐藏 Angular UI Bootstrap 弹出框

Question

提问by bryan

I am trying to manually close a bootstrap popover to get it to close when I click anywhere on the documentor bodythat isn't the popover.

我正在尝试手动关闭引导程序弹出窗口，以便在我单击弹出窗口document或body不是弹出窗口的任意位置时将其关闭。

The closest thing I have found to accomplishing this is to create a directive (found this answer) but this is for a manual trigger if a variable is trueor false.

我找到的最接近的方法是创建一个指令（找到了这个答案），但是如果变量为true或false ，这是用于手动触发的。

Could anyone help me figure out how to to get it to close if I click on anything that isn't the popover?

如果我点击任何不是弹出框的东西，谁能帮我弄清楚如何关闭它？

I don't mind using jQuery $(document).click(function(e){});I just have no clue how to call a close.

我不介意使用 jQuery$(document).click(function(e){});我只是不知道如何调用关闭。

<div id="new_button" popover-template="plusButtonURL" popover-placement="right" popover-append-to-body="true" popover-animation="false">+</div>

Normally popover-trigger="focus"would do the trick, however my popover contains content that needs to be clicked on. I have an ng-clickinside my popover that get's ignored if I use the focustrigger so I am looking for a not-so-conventional way to get around that.

通常popover-trigger="focus"会做到这一点，但是我的弹出窗口包含需要点击的内容。ng-click如果我使用焦点触发器，我的弹出窗口内部有一个会被忽略，所以我正在寻找一种不太传统的方法来解决这个问题。

Answer 1

采纳答案by jme11

EDITED:

编辑：

Plunker Demo

Plunker 演示

Here's how it works (the still long and exhaustive explanation):

这是它的工作原理（仍然冗长而详尽的解释）：

Create a custom directive that allows you to target the trigger element.
Create a custom directive that is added to the body and will find the trigger element and fire the custom event when it is clicked.

创建一个自定义指令，允许您定位触发器元素。
创建一个添加到正文的自定义指令，它将找到触发元素并在单击时触发自定义事件。

Create a custom directive to target the trigger element:

创建一个自定义指令来定位触发器元素：

You need to trigger the custom event handler from the element that opened the popover (in the demo this is the button). The challenge is that the popover is appended as a sibling to this element and I always think that things have greater potential to break when you are traversing the DOM and expecting it to have a specific structure. There are several ways you can target the trigger element, but my approach is to add a unique classname to the element (I choose 'trigger') when you click on it. Only one popover can be opened at a time in this scenario, so it's safe to use a classname, but you can modify to suit your preference.

您需要从打开弹出窗口的元素（在演示中这是按钮）触发自定义事件处理程序。挑战在于，popover 被附加为该元素的兄弟元素，我始终认为，当您遍历 DOM 并期望它具有特定结构时，事情有更大的可能性会被破坏。有多种方法可以定位触发器元素，但我的方法是在单击元素时为其添加唯一的类名（我选择“触发器”）。在这种情况下，一次只能打开一个弹出窗口，因此使用类名是安全的，但您可以根据自己的喜好进行修改。

Custom Directive

自定义指令

app.directive('popoverElem', function(){
  return{
    link: function(scope, element, attrs) {
      element.on('click', function(){
        element.addClass('trigger');
      });
    }
  }
});

Applied to button

应用于按钮

<button popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" class="btn btn-default" popover-elem>Popover With Template</button>

Create a custom directive for the document body (or any other element) to trigger the popover close:

为文档正文（或任何其他元素）创建自定义指令以触发弹出窗口关闭：

The last piece is to create a custom directive that will locate the triggering element and fire the custom event to close the popover when the element it is applied to is clicked. Of course, you have to exclude the initial click event from the 'trigger' element, and any elements you want to interact with on the inside of your popover. Therefore, I added an attribute called exclude-class so you can define a class that you can add to elements whose click events should be ignored (not causing the popover to close).

最后一部分是创建一个自定义指令，该指令将定位触发元素并触发自定义事件以在单击它所应用到的元素时关闭弹出框。当然，您必须从 'trigger' 元素中排除初始点击事件，以及您想要在弹出窗口内部与之交互的任何元素。因此，我添加了一个名为 exclude-class 的属性，以便您可以定义一个类，您可以将其添加到应忽略单击事件（不会导致弹出窗口关闭）的元素中。

To clean things up, when the event handler is triggered, we remove the trigger class that was added to the trigger element.

为了清理，当事件处理程序被触发时，我们删除添加到触发器元素的触发器类。

app.directive('popoverClose', function($timeout){
  return{
    scope: {
      excludeClass: '@'
    },
    link: function(scope, element, attrs) {
      var trigger = document.getElementsByClassName('trigger');

      function closeTrigger(i) {
        $timeout(function(){ 
          angular.element(trigger[0]).triggerHandler('click').removeClass('trigger'); 
        });
      }

      element.on('click', function(event){
        var etarget = angular.element(event.target);
        var tlength = trigger.length;
        if(!etarget.hasClass('trigger') && !etarget.hasClass(scope.excludeClass)) {
          for(var i=0; i<tlength; i++) {
            closeTrigger(i)
          }
        }
      });
    }
  };
});

I added this to the body tag so that the entire page* acts as a dismissible backdrop for the popover:

我将其添加到 body 标签中，以便整个页面*充当弹出窗口的可消除背景：

<body popover-close exclude-class="exclude">

And, I added the exclude class to the input in the popover:

而且，我在弹出窗口的输入中添加了 exclude 类：

<input type="text" ng-model="dynamicPopover.title" class="form-control exclude">

So, there are some tweaks and gotchas, but I'll leave that to you:

所以，有一些调整和问题，但我会把它留给你：

You should set a default exclude class in the link function of the popover-close directive, in case one is not defined.
You need to be aware that the popover-close directive is element bound, so if you remove the styles I set on the html and body elements to give them 100% height, you could have 'dead areas' within your viewport if your content doesn't fill it.

您应该在 popover-close 指令的链接函数中设置一个默认排除类，以防未定义。
您需要注意 popover-close 指令是元素绑定的，因此如果您删除我在 html 和 body 元素上设置的样式以赋予它们 100% 高度，如果您的内容没有，您的视口中可能会有“死区”不填。

Tested in Chrome, Firefox and Safari.

在 Chrome、Firefox 和 Safari 中测试。

Answer 2

回答by icfantv

UPDATE: With the 1.0 release, we've added a new trigger called outsideClickthat will automatically close the popover or tooltip when the user clicks outside the popover or tooltip.

更新：在 1.0 版本中，我们添加了一个名为的新触发器outsideClick，当用户在弹出框或工具提示之外单击时，该触发器将自动关闭弹出框或工具提示。

Starting with the 0.14.0 release, we've added the ability to programmatically control when your tooltip/popover is open or closed via the tooltip-is-openor popover-is-openattributes.

从 0.14.0 版本开始，我们添加了通过tooltip-is-open或popover-is-open属性以编程方式控制工具提示/弹出框何时打开或关闭的功能。

Answer 3

回答by cdauth

Since Angular UI Bootstrap 1.0.0, there is a new outsideClicktrigger for tooltips and popovers (introduced in this pull request. In Angular UI Bootstrap 2.0.0, the popover-triggerhas been modified to use angular expressions (Changelog), so the value has to be put in quotes. This code will work with current versions of angular-ui:

从 Angular UI Bootstrap 1.0.0 开始，outsideClick工具提示和弹出框有一个新的触发器（在这个 pull request 中引入。在 Angular UI Bootstrap 2.0.0 中，popover-trigger已经修改为使用角度表达式（Changelog），所以值必须是加上引号。此代码适用于当前版本的 angular-ui：

<div id="new_button" uib-popover-template="plusButtonURL" popover-trigger="'outsideClick'"
    popover-placement="right" popover-append-to-body="true" popover-animation="false">+</div>

This code will work with old versions of Angular UI Bootstrap (before 2.0.0):

此代码适用于旧版本的 Angular UI Bootstrap（2.0.0 之前）：

<div id="new_button" uib-popover-template="plusButtonURL" popover-trigger="outsideClick"
    popover-placement="right" popover-append-to-body="true" popover-animation="false">+</div>

Answer 4

回答by ajin

popover-trigger="'outsideClick'"This will work perfectly.

popover-trigger="'outsideClick'"这将完美地工作。

popover-trigger="outsideClick"This will not.

popover-trigger="outsideClick"这不会。

I took 1 day to sort it out why it was not working for me.

我花了 1 天时间才弄清楚为什么它对我不起作用。

It is because they checking this using this code, "if (trigger === 'outsideClick')"

这是因为他们使用此代码进行检查， "if (trigger === 'outsideClick')"

Answer 5

回答by Patrick Motard

There is a property called popover-triggerthat you can assign the property focusto.

有一个名为的属性popover-trigger，您可以将该属性分配focus给它。

<button 
      popover-placement="right" 
      popover="On the Right!" 
      popover-trigger="focus" 
      class="btn btn-default">
   Right
</button>

This does the trick! :)

这行得通！:)

Edit: To allow for the tooltip to be clicked on and not trigger focus lost, consider an approach similar to this

编辑：为了允许单击工具提示而不触发焦点丢失，请考虑类似于此的方法

If you want it to work in angular, try creating your own trigger definition. Suggestions on how to do that can be found here.

如果您希望它在 angular 下工作，请尝试创建您自己的触发器定义。可以在此处找到有关如何执行此操作的建议。

Answer 6

回答by Ratheesh Naithalath

What you are looking for is

你要找的是

<button
      popover-trigger="outsideClick" 
      class="btn btn-default">
   Right
</button>

From the documentation - The outsideClick trigger will cause the popover to toggle on click, and hide when anything else is clicked.

从文档中 - externalClick 触发器将导致弹出框在单击时切换，并在单击其他任何内容时隐藏。

Answer 7

回答by Prasad Shigwan

You can use:

您可以使用：

Markup

标记

<div ng-app="Module">
    <div ng-controller="formController">
        <button uib-popover-template="dynamicPopover.templateUrl" popover-trigger="focus" 
          popover-placement="left" type="button" class="btn btn-default">
             Popover With Template
        </button>

        <script type="text/ng-template" id="myPopoverTemplate.html">
            <div>
                <span>prasad!!</span>
            </div>
        </script>
    </div>
</div>

Javascript

<script type="text/javascript">
    var app = angular.module("Module", ['ui.bootstrap']);
    app.controller("formController", ['$scope', function($scope) {
        $scope.dynamicPopover = {
            templateUrl: 'myPopoverTemplate.html'
        };
    }]);
</script>

Answer 8

回答by Jake Scott

I had the same issue and popover-trigger="'outsideClick'"worked for me. Interesting that the documentation did not state this issue.

我有同样的问题并popover-trigger="'outsideClick'"为我工作。有趣的是，文档没有说明这个问题。

Answer 9

回答by ArunBabuVijayanath

What about the 'outsideClick' option in the '$uibTooltipProvider' setTriggersmethod. Documentation says "The outsideClick trigger will cause the tooltip to toggle on click, and hide when anything else is clicked." Documentation

' $uibTooltipProvider' setTriggers方法中的 ' outsideClick' 选项怎么样。文档说“outsideClick 触发器将导致工具提示在单击时切换，并在单击其他任何内容时隐藏。” 文档

Answer 10

回答by aviboy2006

Angular boostrap ui new version 1.x having facility to out side click function. upgrade it to new version.

Angular boostrap ui 新版本 1.x 具有外部单击功能。将其升级到新版本。

<button uib-popover-template="updatePassword.templateUrl" popover-title="Update Password" popover-trigger="outsideClick" popover-placement="right" popover-append-to-body="true">Click here</button>

its work for me.

它为我工作。

focus will not work if any submit button or click event in popover. so this useful way to do.

如果弹出窗口中有任何提交按钮或单击事件，则焦点将不起作用。所以这个有用的方法。

Javascript 单击外部时隐藏 Angular UI Bootstrap 弹出框

提问by bryan

采纳答案by jme11

Plunker Demo

Plunker 演示

Here's how it works (the still long and exhaustive explanation):

这是它的工作原理（仍然冗长而详尽的解释）：

Create a custom directive to target the trigger element:

创建一个自定义指令来定位触发器元素：

Create a custom directive for the document body (or any other element) to trigger the popover close:

为文档正文（或任何其他元素）创建自定义指令以触发弹出窗口关闭：

回答by icfantv

回答by cdauth

回答by ajin

回答by Patrick Motard

回答by Ratheesh Naithalath

回答by Prasad Shigwan

回答by Jake Scott

回答by ArunBabuVijayanath

回答by aviboy2006

相关推荐

最近更新

标签

Javascript 单击外部时隐藏 Angular UI Bootstrap 弹出框

提问by bryan

采纳答案by jme11

Plunker Demo

Plunker 演示

Here's how it works (the still long and exhaustive explanation):

这是它的工作原理（仍然冗长而详尽的解释）：

Create a custom directive to target the trigger element:

创建一个自定义指令来定位触发器元素：

Create a custom directive for the document body (or any other element) to trigger the popover close:

为文档正文（或任何其他元素）创建自定义指令以触发弹出窗口关闭：

回答by icfantv

回答by cdauth

回答by ajin

回答by Patrick Motard

回答by Ratheesh Naithalath

回答by Prasad Shigwan

回答by Jake Scott

回答by ArunBabuVijayanath

回答by aviboy2006

相关推荐

Javascript 表单 onSubmit 确定按下了哪个提交按钮

Javascript 多选复选框下拉菜单

Javascript 函数组件不能有引用。你的意思是使用 React.forwardRef() 吗？

Javascript Owl-carousel：每张幻灯片只显示一张图片

相关推荐

最近更新

标签