开发者

Hide scrollbar of parent when overlay div is visible

开发者 https://www.devze.com 2023-03-08 11:11 出处:网络
I have page with an AjaxLink and when the link is clicked an overlay div will be visible with a loading image covering parent page. I found a related example here. And it is perfectly working. I chang

I have page with an AjaxLink and when the link is clicked an overlay div will be visible with a loading image covering parent page. I found a related example here. And it is perfectly working. I change the case to AjaxLink from AjaxButton. In my scenario the page has a vertical scrollbar by default. This scrollbar is generated as there is a big table with vertical expansion. Now when that overlay div is visible that scrollbar remains visible. I want to hide that scrollbar. So I tried:

Mask.show = function(targetId)
{
  var target=document.getElementById(targetId);
  var mask=document.createElement("div");
  mask.innerHTML=" ";
  mask.className="wicket-mask";
  mask.style.cursor="not-allowed";
  mask.style.zIndex="5000";
  mask.id="wicket_mask_"+targetId;
  document.body.appendChild(mask);
  Mask.offsetMask(mask);

  var spinner=document.createElement("div");
  spinner.innerHTML=" ";
  spinner.className="wicket-spinner";
  spinner.style.cursor="not-allowed";
  spinner.style.zIndex="6000";
  spinner.id="wicket_spinner_"+targetId;
  document.body.appendChild(spinner);
  Mask.centerSpinner(spinner);

  // I have added this
  document.body.style.overflow="hidden";
}

/**
 Hides the mask and spinner
*/
Mask.hide = function(targetId)
{
  var mask=document.getElementById(&quo开发者_JAVA百科t;wicket_mask_"+targetId);
  if (mask!=null) {
   mask.style.display="none";
   document.body.removeChild(mask);
  }
  var spinner=document.getElementById("wicket_spinner_"+targetId);
  if (spinner!=null) {
   spinner.style.display="none";
   document.body.removeChild(spinner);
  }

  // I have added this
  document.body.style.overflow="auto";
}

But no help. That scrollbar remains visible.

I don't know whether I can ask this type of question relating code from different website or not. So I apologize before.

Thanks and regards.


What browser are you using?

I suspect this might be a case of some version of Internet Explorer Quirks Mode, try changing the doctype to enter "Standards Mode".

You can try with:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

In ie you can also try applying the property to document.documentElement if you can't change doctype

0

精彩评论

暂无评论...
验证码 换一张
取 消