使用手动/单击的语义 ui 弹出窗口答案

【问题标题】：semantic ui popup working with manual/click使用手动/单击的语义 ui 弹出窗口
【发布时间】：2016-03-16 07:58:53
【问题描述】：

我需要一些关于如何让它发挥作用的建议。我的目标是在设置 angularjs 范围变量后手动打开语义弹出窗口。假设有 5 张图片，我点击每一张。对于我之前单击的每个图像，弹出窗口都不会再次打开。然后不会消失。我认为它不会消失的最佳选择是有一个计时器/超时来关闭它，但我正在寻找一个更好的选择。我还有一个使用点击事件的表格，当从一个按钮点击到另一个按钮时，它只是关闭，并且有类似的问题与不再打开有关。

所以我正在寻找类似的功能：

手动打开，点击离开时关闭
在单击事件时立即将弹出窗口移动到另一个控件而不关闭它，但在远离这些控件单击时仍会关闭。

我应该尝试内联吗？表格将有大约 200 个按钮，虽然它可能有更多，而且这个例子可能有更多。它们的使用更像是上下文菜单。

可怕的 js fiddle 第一次尝试：https://jsfiddle.net/3ecjecxn/22/

    <div ng-repeat="page in Pages" class="item">
        <div class="ui grid">

            <a ng-if="page.Selected != null && page.Selected === true" class="twelve wide column active" ng-click="GetPageInfo(page.Id)"><span ng-repeat="n in range(page.Indention)">&nbsp;&nbsp;&nbsp;</span>{{page.Name}}</a>
            <a ng-if="page.Selected != null && page.Selected !== true" class="twelve wide column" ng-click="GetPageInfo(page.Id)"><span ng-repeat="n in range(page.Indention)">&nbsp;&nbsp;&nbsp;</span>{{page.Name}}</a>
            <div class="two wide column">
                <!-- Settings icon by Icons8 -->
                <img ng-click="SetTempPageId($event, page.Id)" class="pageCommand" src="[placeimagehere" width="20" height="20">
            </div>
        </div>
    </div>


          $(".pageCommand")
.popup({
    popup: $('#PagePopup'),
    on: 'manual',
    delay: {
        show: 0,
        hide: 0
    },
    lastResort: 'bottom right',
    movePopup: true,
    closable: true,
    prefer: 'opposite'
});


$scope.SetTempPageId = function ($event, id) {
    $scope.EditingPageId = id;

    $($event.target).popup('show');
};

【问题讨论】：

标签： javascript jquery html css angularjs

【解决方案1】：

刚刚回到这个问题，但在发布这个答案后不久，我没有使用语义 ui 作为上下文菜单，而是使用了 jquery contextmenu：

http://swisnl.github.io/jQuery-contextMenu/index.html

$.contextMenu({
              selector: '.command',
              callback: function (key, options) {
                  if (key == "Search") {
                      console.log("clicked search");
                      var search = $(".search").modal({ duration: 0 });
                      search.modal("show");
                  }
              },
              items: {
                  "Search": { name: "Search", icon: "search" }
              }
          });

【讨论】：