该页面不会在屏幕上BlockUI定位(BlockUI positioning on the page

2019-10-16 17:12发布

我已经使用这个插件之前,但现在blockui没有显示在页面上正确定位。 在屏幕上它的确定像40%从顶部但问题是与页面 。 它是滚动一路攀升到顶部。

如果我在页面moddle有一个按钮,我点击它即可启动blockui页面会双击自动滚屏重回巅峰。 我不知道为什么

下面是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:

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



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

});

Answer 1:

尝试添加return false; 到单击处理结束,以防止浏览器也做了默认的动作,当你点击链接,这是去#网址。

即改变你的jQuery来:

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

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

  return false;    
});


文章来源: BlockUI positioning on the page not the screen