BlockUI在页面而不是屏幕上的位置 [英] BlockUI positioning on the page not the screen

问题描述

我以前使用过此插件，但现在blockui在页面上的位置不正确. 在屏幕上可以看到40％的顶部，但是问题出在页面上.它一直滚动到顶部.

I have used this plugin before but now the blockui is not positioning correctly on the page. on the screen it's ok like 40% from the top but the problem is with the page. it is scrolling all the way up to the top.

如果我在页面的模块中有一个按钮，然后单击它以启动blockui，则该页面将返回顶部. 我不知道为什么

if I have a button in the moddle of the page and I click on it to start the blockui the page will scrool back to the top. and I dont know why

这是html:

<div class="btn" id="block">
   <a href="#"><span>to buy tickets</span></a>
</div>
<div id="blockmsg">
  <a href="#" id="x"><img src="images/x.png" alt="x to close the window"/></a>
  <div class="blockmsg">
    <a href="#" class="hadran"><span>hadran.co.il</span></a>
    <a href="#" class="opera"><span>opera house</span></a>
    <div style="clear: both;height: 15px;"></div>
    <div class="btnhand">
      <a href="#"><span>join facebook</span></a>
    </div>
  </div>
</div>

CSS:

the css:

div.btn{
  width: 266px;
  margin: 0 auto;
  height: 56px;
}
#blockmsg{
  position: relative;
  padding-top: 30px;
  display: none;
  width: 400px;
  z-index: 100000;
}

jQuery:

the jquery:

$('#block').click(function() { 

  $.blockUI({ 
      message: $('#blockmsg'), 
      fadeIn: 700,
      fadeOut: 700,
      centerX: true,
      centerY: true,
      css: { 
      backgroundColor: 'transparent',
      border: 'none',
      cursor: 'default'

    } 
  }); 
  $('#x').attr('title','Click to unblock').click($.unblockUI);
  //setTimeout($.unblockUI, 2000); 

});

推荐答案

尝试将return false;添加到单击处理程序的末尾，以防止浏览器在单击链接时也执行默认操作，该操作将转到#网址.

Try adding return false; to the end of the click handler to prevent the browser from also doing the default action when you click the link, which is to go to the # url.

即将您的jQuery更改为:

i.e. change your jQuery to:

$('#block').click(function() { 

  $.blockUI({ 
    // ... (same as before) 
  }); 
  $('#x').attr('title','Click to unblock').click($.unblockUI);

  return false;    
});

这篇关于BlockUI在页面而不是屏幕上的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！