Member Avatar for jemz

Hi, how to make something the same in daniweb when we clicked the log-in link the background color black will be visible "i think this is called mask background", and it will cover the whole page even the the content is short or long it will adapt the size of the page.

Thank you :)

  • 3 Contributors
  • 5 Replies
  • 132 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by jemz

Dani AI

Generated

Short practical fix for the “mask background” issue was seeing: the white strip at the bottom usually comes from how the overlay is positioned or where it lives in the DOM. ’s library route is fine if you already use one, and ’s overlay idea is on the right track — the reliable, simple approach is to append a backdrop to the document body and make it cover the viewport with position: fixed. That avoids percentage-height pitfalls and keeps the backdrop above everything.

A minimal CSS + JS approach (append the element to body, lock page scroll):

/* CSS */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.65);
  z-index: 9998;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}
/* JS */
function showModal(modalEl) {
  var backdrop = document.createElement('div');
  backdrop.className = 'modal-backdrop';
  document.body.appendChild(backdrop);
  document.body.style.overflow = 'hidden'; // stop background scroll
  modalEl.style.display = 'block'; // or append modalEl to body
}
function hideModal(modalEl) {
  var bd = document.querySelector('.modal-backdrop');
  if (bd) bd.remove();
  document.body.style.overflow = '';
  modalEl.style.display = 'none';
}

If you want the backdrop to follow the full document height (so it scrolls with the page), compute the document height and set the overlay’s height in JS, and recalc on resize. Common gotchas: the overlay must be a child of body (not inside a positioned container), ancestor transform/filter can break position: fixed, and low z-index or stacking context can leave elements above the backdrop. For debugging, inspect the backdrop’s computed width/height, parent element, and z-index. For accessibility, move focus into the modal and mark background content inert or aria-hidden while open.

Recommended Answers

All 5 Replies

Member Avatar for pixelsoul

It is commonly referred to as a modal window, and it uses javscript and CSS. There are different way to do this easily with different javascript frameworks. My suggestion would be to use the jQuery UI dialog window with it set to modal.
http://jqueryui.com/dialog/

Here is a simple example I had in jsFiddle
http://jsfiddle.net/pixelsoul/AsyCt/

commented: nice reference to jQuery UI. I didnt realize this was part of their UI. Simple solution.. +12
Member Avatar for JorgeM

One approach is to have a "hidden" div with a z-index greater than the normal content on your page, but with a z-index less than the "modal pop-up". This "hidden" div would have styling such as:

display: none;
position:absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: ?;
z-index: ?;
-moz-opacity: 0.7;
opacity: .70;
filter: alpha(opacity=70);

When you perform some action, click on a link, hover, etc..., you use JavaScript to display the modal pop-up & also display this "hidden" div. Since you may want to apply the opacity to this hidden div, when you make it visible, it will appear as the display has "dimmed" because you will faintly see your normal content in the background.

EDIT: Looks like I was responding at about the same time as pixelsoul. I like that solution with jQuery, if you are already including the jQuery/jQueryUI library in your web app.

Edited by JorgeM
Member Avatar for jemz

THank you for the quick response...I mean for the background color, as you can see when you are going to clicked the log-in link the background color will cover the whole page without the white background in the bottom of the page...i am trying to set the height of my background color to 100% with absolute positioning,but still i have white background color at the bottom...Thank you again for the reply. I appreciated it.

:)

Member Avatar for JorgeM

If you a demo of your site online, provide the URL so we can take a look, or provide the relevant code in your post.

Member Avatar for jemz

, Thank you,....

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.