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)

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

1 个答案: