弹出窗口时禁用背景窗口

Question

I have a link on my page. When i click on it a pop up opens and the background becomes grey in color. But my problem is i am still able to click on other links present in background. The div id for background is pagewrapper. As far as i think code - document.getElementById('pagewrapper').disabled=true; should have done the trick and diabled the entire background behind the pop up freezes. But it is not happening.

This is the code to open the popUp. Last line was supposed to disable the background window.

  function popUpText(popUpContents)
{   
    // move the popup to a relative position to how the page is scrolled
    var containerTop = Position.page($('pagewrapper'))[1];
    $('popup').setStyle({top: ((0-containerTop)+100) + 'px'});
    var popupPageHTML = $(popUpContents).innerHTML;
    var uniquePopupPageHTML = popupPageHTML.replace(/-POPUP_ID_REPLACER-/g,"-");
    $('popup').innerHTML = uniquePopupPageHTML;
    toggleIt('popup');
    $('pagewrapper').setOpacity(.3);
    document.getElementById('pagewrapper').disabled=true;
}

Answer 1

You should create a popup layout which must cover entire body and z-index of the overlay should be between body and popup. Delete the overlay when user closes the popup.

Edit: Here is a tutorial that you may follow:

http://hallofhavoc.com/2013/05/how-to-create-an-overlay-popup-box-using-html-css-and-jquery/