How to disable scrolling of list view when popup screen Display

Question

I have a pop up screen.

After clicking the Button, I want to show my popup screen.

But problem is that, whenever user open the pop screen, it displays But again user able to press button.

I need to disable button (I do this).But user also able to scroll list and while scrolling popup screen goes up and will not display.

I thing user will not able to scroll while pop up screen in front of user.

User click any where in screen it hide the popup screen. Here is my update code. 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');
                }
   });

Gajotres · Accepted Answer · 2013-06-17T12:56:14.107

3

If I understood you correctly you want to display a popup and prevent user from accessing rest of the page.

If this is true then this can be easily done with 2 additional popup attributes.

data-overlay-theme="a" will create an overlay over whole page so only popup will be accessable.

data-dismissible="false" will prevent popup closure when clicked outside of it. Basically only way to close it now is programatically.

Working example: http://jsfiddle.net/Gajotres/aJChc/

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

EDIT :

Next working example: http://jsfiddle.net/Gajotres/aJChc/

This code example will prevent body scrolling when popup is opened. Scrolling will ba enabled again when popup is closed.

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

And this is your example with my code: http://jsfiddle.net/Gajotres/HesVd/13/

Label width fix:

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

edited Jun 17 '13 at 12:56

answered Jun 17 '13 at 12:04

Gajotres

57,309
16
102
130

But user able to scroll still please remove scrolling ? – Jun 17 '13 at 12:26
I think like a tester .User will not able to scroll while pop up screen.here is update code.http://jsfiddle.net/ravi1989/HesVd/12/ – Jun 17 '13 at 12:27
Got it, give me few minutes I will write you a solution. It will require a little bit of Java, i hope you don't mind. – Gajotres Jun 17 '13 at 12:32
Secondly why the pop up screen of setting(button click) is smaller than plus(click button) pop up screen? Thirdly why the label field and text field is not same line in popup screen ? – Jun 17 '13 at 12:36
Look at my answer again. Also I dont understand your second question. – Gajotres Jun 17 '13 at 13:00
Sir check my update . here when you click + button on header it show pop screen (But label and text field is not in same line) up and down .Case name should be front of text field.and if you click setting button(First button) it show small pop up why Here is my update code http://jsfiddle.net/ravi1989/HesVd/16/ – Jun 17 '13 at 13:14
But only problem is on css of pop up screen . lable should be in front of text field .and setting pop up screen should be in same size of add pop up screen – Jun 17 '13 at 13:24
Label will be in front of a text field only if enough space is available. It is an internal logic of jQuery Mobile so you can't anything against that. Can you describe you other question with more details? – Gajotres Jun 17 '13 at 13:27
Actually when i have 3 button on header (setting ,plus ,edit).If you click setting button pop up show smaller in size than plus button..can you please increase the size of pop up screen of (setting )button so that user able to see easily – Jun 17 '13 at 15:49

How to disable scrolling of list view when popup screen Display

1 Answers1