Jquery 如何在弹出屏幕显示时禁用列表视图的滚动

我有一个弹出式屏幕

单击按钮后，我想显示我的弹出屏幕

但问题是，每当用户打开弹出屏幕时，它都会显示，但用户可以再次按下按钮

我需要禁用按钮（我这样做）。但用户也能够滚动列表，而滚动弹出屏幕上升，将不会显示

当在用户面前弹出屏幕时，用户将无法滚动

用户单击屏幕中隐藏弹出屏幕的任何位置。 这是我的更新代码。

---

如果我理解正确，您希望显示一个弹出窗口，并阻止用户访问页面的其余部分

如果这是真的，那么这可以通过2个额外的弹出属性轻松完成

数据覆盖主题=“a”

将在整个页面上创建覆盖，因此只有弹出窗口才可访问

data dismissible=“false”

将阻止在弹出窗口之外单击时关闭弹出窗口。基本上，现在关闭它的唯一方法是通过编程

工作示例：

这是您使用我的代码的示例：

标签宽度固定：

.ui-input-text {
    width: 100% !important;
}

---

但用户仍然可以滚动，请删除滚动？我想就像一个测试人员。用户将无法滚动，而弹出屏幕。这是更新代码。明白了，给我几分钟，我会给你写一个解决方案。它需要一点Java，我希望你不介意。第二，为什么设置（点击按钮）的弹出屏幕比加（点击按钮）的弹出屏幕小？第三，为什么标签字段和文本字段在弹出屏幕中不是同一行？再看看我的答案。我也不明白你的第二个问题。

<div data-role="popup" id="toc" data-overlay-theme="a" data-dismissible="false"></div>

$(document).on('popupafteropen', '[data-role="popup"]' ,function( event, ui ) {
    $('body').css('overflow','hidden');
}).on('popupafterclose', '[data-role="popup"]' ,function( event, ui ) {
    $('body').css('overflow','auto');
});

.ui-input-text {
    width: 100% !important;
}