語義ui彈出式使用手冊/點擊

Question

我需要一些關於如何使其工作的建議。我的目標是在設置一個angularjs範圍變量後手動打開語義彈出窗口。假設有5個圖像，我點擊每個圖像。對於我之前點擊過的每張圖片，彈出窗口都不會再次打開。然後不會消失。我認爲它不會消失的最佳選擇是有一個計時器/超時關閉它，但我正在尋找一個更好的選擇。我也有一個使用click事件的表格，當從一個按鈕點擊到另一個時，它只是關閉，並且有類似的問題與不再打開相關。

所以我尋找類似的特點：

1. 手動開啓，但click事件立即點擊關閉時離開

2. 移動彈出另一個控制而不將其關閉，但仍接近時點擊遠離這些控件。

我應該嘗試內聯嗎？表格將有大約200個按鈕，儘管它可能有更多，而這個例子可能有更多。他們更像是使用上下文菜單。在爵士小提琴

可怕的第一次嘗試：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'); 
}; 

Answer 1

剛纔又回到了這一點，但發佈這個答案，而不是使用語義UI作爲上下文菜單後不久，我只是用jQuery的文本菜單：

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" } 
       } 
      });