How to disable scrolling of list view when popup screen Display

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

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;
}