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

4 Years
Discussion Span
Last Post by jemz

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.

Here is a simple example I had in jsFiddle

Votes + Comments
nice reference to jQuery UI. I didnt realize this was part of their UI. Simple solution..

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


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.



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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.