Member Avatar for Albert Pinto

Hi People.
Want some help regarding overlay div.

I'm trying to develop a overly form. Just wanna know how to make div container(the overlay form) occupy or wrap entire browser area....

What I'm trying to do is......

I have a parent container, where all other containers and images reside. In this container there is a button, "GET REGISTRATION FORM".

On click of this button, I want the background to go dull....and the registration form to fade in front... User should not have any access to the page content beneath when this form is on top. There is close button in the form. Once its clicked the form will fade out... and my home page below will be active again.

What I've done so far is....

Just above my parent container, I've created another div with id "overlay".
I've put form inside this.... and then in CSS, I've made like this.

#overlay
{
position: absolute;
z-index : 10; 
top: 0;
left:0;
width: 100%;
height: 100%;
background: url('transparent_image.png');
display: none
}

Initialy I've got to hide the div, and make it appear only on click event of the "GET REGISTRATION FORM" button.
So, in jquery I've passed id of the "GET REGISTRATION FORM" button... on click... #overlay will fadeToggle();

Now the problem is... my home page content is dynamic. I mean there are some tables which display lot of data. And these records are fetched from database and displayed in the table. So the number of records displayed in the table vary.... and hence the height of my home page will vary.... I'm not able to get the #overlay container to occupy entire browser area.... I mean it goes to certain height... and then when I scroll... the home page contents (which are beneath the overlay form) are visible .... I mean the overlay container won't completely wrap the browser area. Is there any way to make it occupy entire home page..?

Sorry for the lengthy post, just wanted to clarify my issue as much as possible.

Thanks

  • 5 Contributors
  • 6 Replies
  • 299 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Albert Pinto

Dani AI

Generated

— the root cause here is positioning and containment. An absolutely positioned element sized to "100%" can end up limited by an ancestor or by document flow, so when the page grows or scrolls the overlay no longer covers the viewport. 's “make everything 100%” approach often breaks layout (as you noticed). A robust pattern is: keep the overlay as a top-level child of the <body>, make it fixed to the viewport, and disable page scrolling while the modal is open.

A minimal, practical example (CSS only):

/* overlay covers the viewport */
#overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  display: none;
}

/* centered dialog inside the overlay */
#overlay .dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-height: 85vh;
  overflow: auto;
  background: #fff;
  padding: 1rem;
}

Open/close handling (jQuery example):

// open
$('.open-register').on('click', function(e){
  e.preventDefault();
  $('#overlay').fadeIn(200);
  $('body').addClass('modal-open'); // prevents body scroll
  $('#overlay .close').focus();
});

// close
$('#overlay .close').on('click', function(){
  $('#overlay').fadeOut(200);
  $('body').removeClass('modal-open');
});
/* prevent page scroll when modal is open */
body.modal-open { overflow: hidden; }

Troubleshooting & notes: ensure the overlay element is appended directly under <body> (not inside a positioned/overflowed wrapper). If it still misbehaves, check for CSS transforms, filters or will-change on ancestors — those can change how fixed positioning behaves. Prefer CSS rgba for the dim effect rather than image tiling (simpler and resizes cleanly). For accessibility add role="dialog" and aria-modal="true", move focus into the dialog on open, and restore it on close.

Recommended Answers

All 6 Replies

Member Avatar for Octet

This is a common mistake that people make, you need to define a 100% area in both your Body and Overall in your CSS like this:

*{
    height: 100%;
}

body{
    height: 100%;
}

#DIV{
    height: 100%;
}

Give that a try and let us know how it goes! That should tell the Div to occupy the entire area of the browsers viewport (however it does cause other values to do some funky things.... so be careful).

Edited by Octet
Member Avatar for Albert Pinto

Thanx for the quick reply sir...

Yeah I tried that solution, didn't worked.

I tried this too....

*{
height: 100%;
}

But it caused lot of alignment issues.... so I reverted it back....

I don't know whether there is a pure CSS way to fix this...I'm still trying to find some solution to this...... will post it here if I found one.

Thanx for your time and consideration.

Regards.

Member Avatar for Member #46692

Um fancybox anyone?

Member Avatar for crescendo

height and width set to 100% should have worked. It works for me everytime I use it

Member Avatar for TonyG_cyprus

Check the size of your transparent_image.png (I would make it 1px x 1px)
and use background-repeat: repeat; because although your div is 100% x 100% your image may not be big enough.

Edited by TonyG_cyprus
Member Avatar for Albert Pinto

Yes of course sir.. my image is 1px X 1px and in png format.....

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.