CODEWITHSUNDEEP
csspopupcenter
Eric Lukazewski
Eric Lukazewski

Reputation: 21

Using CSS to auto resize & center popup

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

Upvotes: 1

Views: 4894

Answers (2)

Matthew Abrman
Matthew Abrman

Reputation: 731

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%);    
}

Upvotes: 0

Deathmras
Deathmras

Reputation: 312

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

Upvotes: 1

Related Questions