如何在全屏模式下显示 jquery ContextMenu？

Question

我在 div 中添加了一个上下文菜单。现在一切正常，我使用 .requestFullscreen() 将 div 设置为全屏。 div 现在全屏显示，但 contextMenu 不再出现。

我需要改变什么才能让它出现？

这是我的代码：

$.contextMenu({
            selector: '.fixed-size-info',
            zIndex: 100,
            callback: function(key, options) {
                switch (key) {
                    case 'fullscreen':
                        if( window.innerHeight == screen.height) {
                          // browser is fullscreen
                          self._div.exitFullscreen();
                          var target = {
                            parent: self._selectedGuid
                          };
                          self.openParentInfo(target, self);
                        } else {
                          document.getElementById('fixed-size-info').requestFullscreen();
                          // openFullscreen(document.getElementById('fixed-size-info'));
                          // openFullscreen(self._div);
                          self.table.style.height = '100%';
                          var target = {
                            parent: self._selectedGuid
                          };
                          self.openParentInfo(target, self);
                        }
                        break;

                    default:
                        console.log(key);
                        console.log(options);
                }
            },
            items: {
                "fullscreen": {
                    name: "Fullscreen",
                    icon: "fas fa-expand"
                },
                "sep1": "---------",
                "quit": {
                    name: "Quit",
                    icon: function() {
                        return 'context-menu-icon context-menu-icon-quit';
                    }
                }
            }
        });

Answer 1

我认为问题在于您的上下文菜单的z-index（在您的情况下为100）太小，低于全屏div z-index（大约为2147483647）。

您应该在此处查看 SO 答案：Displaying elements other than fullscreen element (HTML5 fullscreen API)