[guyfromri]

Hey guys!!

So I'm trying to get a little fancy and learn something new that I think looks really cool but I'm having a few issues...

I'm trying to create a faux page that pops up inside the current page. I like the look where the body is blacked out and the frm is in the middle but I'm having the following issues...

The form shows up and the horizontal alignment is center but the vertical alignment doesn't work...also the <div class> frm is taking on the opacity from the parent div -- any thoughts?

CSS

.frm_Con{
  width: 100%;
  height: 100%;
  position: absolute;
  background: #000;
  opacity:0.6;
  filter:alpha(opacity=60); /* For IE8 and earlier */
  z-index: 10;
}

.frm{
  background: #fff;  
  z-index: 11;
  padding: 20px;
  text-align: center;
  vertical-align: middle;
}

HTML

<div id="frm_Full_Page_Con" class="frm_Con">
  <div class="frm">
    <img src="http://mysite.co/beta/user_bus_cards/1_MjAyOTc1Mzg5MA==.png"/>
  </div>
</div>

Here's an example of what I'm trying to do


As always, thanks in advance!!

[creativecoding]

I love KAT.


I had something like this, but what I did instead was something like this:

page:

<a href="#" id="overlay" class="nocursor"><div class="overlay"></div></a>
<div class="form"></div>

css:

.form {
    width: 350px;
    left: 35%;
    top: 50%;
    position: absolute;
    z-index: 999;
}
.overlay {
    z-index: 998;
    background-color: black;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0.7;
    filter:alpha(opacity=70);
    display: none;
}
.nocursor {
    cursor: default;
}

You can add a little bit more styling to make it more presentable, but you get the idea.

This post has been edited by creativecoding: 22 January 2012 - 06:16 PM

[thrca]

CC is on target here.. Because you have .frm within .frm_Con, you cannot set a negative opacity (think of it that opacity is relative to the parent.. If parent is 60%, and child is 100%, computed opacity is 60%. On the same token, if parent is 60% and child is 50%, resulting opacity for child is 30%.

Seperate your overlay from your content as CC suggested...

On a side note, if you are using jQuery, why not use one of the umpteen dozen available colorbox plugins out there.. I personally prefer Colorbox, a lightweight lightbox for jQuery 1.3+

Totally untested 30-second example:

Some page content here...
<div id="container" style="visibility:hidden;">
  <div id="overlay" style="opacity:0.6;background-color:#000;width:100%;height:100%;">&nbsp;</div>
  <div id="content" style="margin-left:auto;margin-right:auto;width:75%;height:300px;">Some content</div>
</div>
<script>
$(document).ready(function(){
  $('#container').show();
});
</script>