在 jQuery Mobile 对话框/弹出窗口/面板后面启用文本选择

Question

我有一个 jQuery Mobile 滑动面板，用户可以从中选择一些电子阅读器类型的选项（突出显示、搜索、定义等）。问题是当滑动面板打开并处于活动状态时，用户无法从页面中选择文本。

结果是，要使用这些功能，用户必须选择他们想要突出显示的文本，然后打开滑动面板以突出显示它。显然不是一个很好的用户体验。

我搜索了 SO 和 jQuery Mobile 文档，但没有找到在对话框、弹出窗口或面板处于活动状态时启用用户选择的方法。这里有人对这个主题有任何想法吗？

谢谢。

Answer 1

只需要修改一些CSS就可以解决。

第一部分

jQuery Mobile 弹出窗口和面板有一个隐藏的覆盖 div，在弹出窗口和面板打开时覆盖全屏高度和宽度。

您只需要做一件事。使用一些浏览器工具查看 HTML 结构并检查覆盖 div 的名称，然后将其设置为这个 css 属性：

display: none;

如果它只有类名，你需要这样做：

display: none !important;

如果您希望我什至可以为您创建一个工作示例。

第二部分

现在这部分很棘手，它适用于弹出窗口。 jQuery Mobile js 代码通过 javascript 防止背景文本选择。

它可以通过手动修复，基本上你需要修改jQuery Mobile javascript文件，未压缩一个。完成所有更改后再次压缩它。

打开jQuery Mobile 1.3.2 js文件（未压缩版），到第8505行，如下所示：

if ( tgt !== ui.container[ 0 ] ) {
    $tgt = $( e.target );
    if ( 0 === $tgt.parents().filter( ui.container[ 0 ] ).length ) {
        $( document.activeElement ).one( "focus", function( e ) {
            $tgt.blur();
        });
        ui.focusElement.focus();
        e.preventDefault();
        e.stopImmediatePropagation();
        return false;
    } else if ( ui.focusElement[ 0 ] === ui.container[ 0 ] ) {
        ui.focusElement = $tgt;
    }
}

改成这样：

if ( tgt !== ui.container[ 0 ] ) {
    /*$tgt = $( e.target );
    if ( 0 === $tgt.parents().filter( ui.container[ 0 ] ).length ) {
        $( document.activeElement ).one( "focus", function( e ) {
            $tgt.blur();
        });
        ui.focusElement.focus();
        e.preventDefault();
        e.stopImmediatePropagation();
        return false;
    } else if ( ui.focusElement[ 0 ] === ui.container[ 0 ] ) {
        ui.focusElement = $tgt;
    }*/
}

背景选择现在可以工作了。如果您使用的是较旧的 jQuery Mobile 1.3.1 或 1.3，只需找到相同的功能并执行相同的操作即可。