jquery - 在 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，只需找到相同的函数并执行相同的操作。