Using CSS to auto resize & center popup - css

Question

I'm trying to have a popup that auto sizes to fit content based on screen resolution, while also remaining in the dead center of the screen both horizontally & vertically.
This is where I'm at so far:
.reveal-modal {
background: none no-repeat scroll 0 0 #eee;
border-radius: 5px;
width: 50%;
height: 50%;
left: 25%;
top: 25%;
padding: 2%;
position: absolute;
visibility: hidden;
z-index: 101;
}
.reveal-child {
display: block;
position: relative;
width: 100%;
height: 100%;
}
The effect is close, but still doesn't work in certain resolutions. In some places the container is too large while others it is too small. I'd ideally like the container to be only as big as the content requires.
The demo can be viewed on 104.131.228.107 and clicking the Register button

Answer 1

I dont understand you, but if u want something like this site you linked, than watch here how to do popup.
u can use jQuery for that.
$('.button').click(function(){
$(".content").animate({opacity:"0.3"},500,function(){
$(".popup").fadeIn();
});
});
$(".popup").click(function(){
$(".popup").fadeOut(function(){
$(".content").animate({opacity:"1"},500);
});
});

Answer 2

This may be what you're looking for?
I made a fiddle where I made the width static so there is no unnecessary whitespace in the modal.
This one scales to the 50% width and height just as you had it and stops at the minimum for your content using the "min-width" and "min-height" properties.
If you want to create different styles for different screen resolutions use media queries
Hope it helped
#myModal {
position: absolute;
width: 50%;
height: 50%;
min-width:500px;
min-height:230px;
left: 50%;
top:50%;
border-radius: 5px;
background-color: #fff;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}