Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

blockui overlay not covering whole page?

I am using blockui for "Wait ... loading" pop up. It is working fine, but has one small issue: the overlay is covering only captured screen, not scroll window. If I scroll right, the width is not fully covered (but height is covered fully).

I have only width has problem.

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        jQuery('#myAlert').click(function () {
            jQuery.blockUI({ message: '<center> <img src="/_layouts/1033/styles/ajax-loaderbar.gif" alt="Loading.." />
                <br />  <font size="2" face="Arial" >
                <b> Please wait... </b></font></center><br /> 
                <font size="2" face="Arial" ><b>while we load all your information.</b></font>'});
        });
    });
</script>

enter image description here

like image 835
James123 Avatar asked Nov 29 '25 01:11

James123


1 Answers

The blocking element should be an immediate child of the BODY tag. It should be nested like this:

<html>
 <!-- etc -->
 <body>
  <div id="domMessage"></div>
  ...

And not this:

<html>
<!-- etc -->
 <body>
  <div id="some-other-div">
   <div id="domMessage"></div>
  </div>
...
like image 93
Daggar Avatar answered Nov 30 '25 15:11

Daggar



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!