4

我有一个弹出屏幕。

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

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

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

我认为用户在用户面前弹出屏幕时将无法滚动。

用户单击屏幕中的任何位置，它会隐藏弹出屏幕。这是我的更新代码。 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');
                }
   });
4

1 回答 1

3

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

如果这是真的，那么这可以通过 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;
}
于 2013-06-17T12:04:37.880 回答