Как отключить прокрутку списка при отображении всплывающего экрана

У меня всплывающий экран.

После нажатия кнопки я хочу показать свой всплывающий экран.

Но проблема в том, что всякий раз, когда пользователь открывает всплывающий экран, он отображает Но снова пользователь может нажать кнопку.

Мне нужно отключить кнопку (я делаю это). Но пользователь также может прокручивать список, и во время прокрутки всплывающий экран поднимается и не отображается.

Я думаю, что пользователь не сможет прокручивать всплывающее окно перед пользователем.

Пользователь щелкает в любом месте экрана, чтобы скрыть всплывающее окно. Вот мой код обновления. 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');
                }
   });

html jquery css jquery-mobile jquery-mobile-popup
person Community    schedule 17.06.2013    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Если я правильно вас понял, вы хотите отобразить всплывающее окно и запретить пользователю доступ к остальной части страницы.

Если это так, то это можно легко сделать с помощью 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;
}
person Gajotres    schedule 17.06.2013
comment
Но пользователь все еще может прокручивать, пожалуйста, удалите прокрутку? - person ; 17.06.2013
comment
Я думаю, как тестер. Пользователь не сможет прокручивать во время всплывающего экрана. Вот код обновления. .net/ravi1989/HesVd/12 - person ; 17.06.2013
comment
Понял, дайте мне несколько минут, я напишу вам решение. Это потребует немного Java, я надеюсь, вы не возражаете. - person Gajotres; 17.06.2013
comment
Во-вторых, почему всплывающий экран настройки (нажатие кнопки) меньше, чем всплывающий экран с плюсом (нажатие кнопки)? В-третьих, почему поле метки и текстовое поле не совпадают на всплывающем экране? - person ; 17.06.2013
comment
Посмотрите еще раз на мой ответ. Также я не понимаю вашего второго вопроса. - person Gajotres; 17.06.2013
comment
Сэр, проверьте мое обновление. здесь, когда вы нажимаете кнопку + в заголовке, он показывает всплывающий экран (но метка и текстовое поле не находятся в одной строке) вверх и вниз. Имя случая должно быть перед текстовым полем. и если вы нажмете кнопку настройки (первая кнопка), он покажет маленький всплывающее окно, почему Вот мой код обновления jsfiddle.net/ravi1989/HesVd/16 - person ; 17.06.2013
comment
Но проблема только в CSS всплывающего экрана. Ярлык должен быть перед текстовым полем. И всплывающее окно настроек должно быть того же размера, что и всплывающее окно добавления. - person ; 17.06.2013
comment
Метка будет располагаться перед текстовым полем только при наличии достаточного места. Это внутренняя логика jQuery Mobile, поэтому вы ничего не можете против этого. Можете ли вы описать свой другой вопрос более подробно? - person Gajotres; 17.06.2013
comment
На самом деле, когда у меня есть 3 кнопки в заголовке (настройка, плюс, редактирование). Если вы нажмете кнопку настройки, всплывающее окно будет меньше по размеру, чем кнопка «плюс»... не могли бы вы увеличить размер всплывающего экрана кнопки (настройки), чтобы пользователь способен легко видеть - person ; 17.06.2013