Question

I’m trying to create in HTML5 a view made of div‘s that displays in the center of the page while the background is grayed out. Something like the Silverlight child window. I am having a horrible time trying to get this to work.

Answer 1

You can easily do it with some basic css like so. This is just the css part not javascript to animate it or toggle. But it should be enough to get you started.

CSS

.div {
    position:absolute;
    top:300px;
    width:300px;
    height:260px;
    left:50%;
    z-index:1000;
    margin-left: -150px; /* negative half the width of the div */
}

.background {
    background:#000;
    opacity:0.5;
    position:fixed:
    width:100%;
    height:100%;
    z-index:999;
}

HTML

<div class="div">
   My Content
</div>
<div class="background "></div>