Question

我有一个弹出屏幕。

点击按钮后，我想显示弹出屏幕。

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

我需要禁用按钮（我这样做）。但是用户也可以滚动列表，同时滚动弹出屏幕会上升并且不会显示。

用户无法在用户面前弹出屏幕时滚动。

用户点击屏幕中任意位置隐藏弹出屏幕。这是我的更新代码。 http://jsfiddle.net/ravi1989/HesVd/10/

$("#addbuttons").on("click", "a", function() {

                if ($(this).attr("id") == "Add") {
                    alert("fdfg")
                     $('#addbuttons').prop('disabled', true).addClass('ui-disabled');
                     $('.row').prop('disabled', true).addClass('ui-disabled');
                }
   });

Answer 1

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

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

data-overlay-theme="a" 会在整个页面上创建叠加层，因此只有弹出窗口才可访问。

data-dismissible="false" 会在外部点击时阻止弹出窗口关闭。现在基本上只能以编程方式关闭它。

工作示例：http://jsfiddle.net/Gajotres/aJChc/

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

编辑：

下一个工作示例：http://jsfiddle.net/Gajotres/aJChc/

此代码示例将在打开弹出窗口时阻止正文滚动。当弹出窗口关闭时，滚动将再次启用。

$(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');
});

这是我的代码示例：http://jsfiddle.net/Gajotres/HesVd/13/

标签宽度修正：

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

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

1 个答案: