javascript - Magnific-Popup 不允许其自身的弹出窗口获得焦点

Question

当 TinyMCE(或任何其他所见即所得编辑器)在 Magnific-Popup 中初始化时，它可以毫无问题地工作，您可以编辑和格式化 HTML。但是，当您单击添加链接或添加图像按钮时，TinyMCE 将打开另一个弹出窗口，TinyMCE 弹出窗口的文本字段无法获得焦点，因此不可编辑。是否有 Magnific-Popup 设置允许 TinyMCE 在其自己的弹出窗口中聚焦？

基本代码:

$.magnificPopup.open({items:{src:'#modal'}});
tinymce.init({ selector: '#textarea'});

Answer 1

您需要排除其他弹出类，如果它们不在 MagnificPopup DOM 中。看 select2 in magnific popup: search input cannot be focused和 https://github.com/dimsemenov/Magnific-Popup/issues/280

正如作者所说:

When tab focus changes, the popup checks if the new focused element isinside the popup. If it is outside, popup sets focus back to the rootelement of popup. This is done to "lock" the tab focus in popup.

“select2”插件的解决方法示例:

$.magnificPopup.instance._onFocusIn = function(e) {
          // Do nothing if target element is select2 input
          if( $(e.target).hasClass('select2-input') ) {
            return true;
          } 
          // Else call parent method
          $.magnificPopup.proto._onFocusIn.call(this,e);
};