CSS를 사용하여 자동 크기 조정 및 센터 팝업

Question

자동으로 화면 크기에 따라 내용에 맞게 크기가 조정되고 동시에 화면의 중앙 부분에 수평으로 유지되는 팝업이 나타나려고합니다 (가로로 &).

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

효과는 가까운,하지만 여전히 특정 해상도에서 작동하지 않습니다 : 내가 지금까지 어디에 있어요

이입니다. 어떤 장소에서는 컨테이너가 너무 크고 다른 곳은 너무 작습니다. 컨텐트가 요구하는만큼만 컨테이너를 사용하는 것이 이상적입니다.

데모

는 104.131.228.107에서 볼과

Answer 1

내가 당신을 이해 해달라고 등록 버튼을 클릭하지만, u는 당신이 링크 된 사이트 같은 것을 원하는 경우 팝업을 할 here 어떻게 볼보다 할 수 있습니다. 그걸로 jQuery를 사용할 수 있습니다.

$('.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

이것은 무엇을 원했을 것입니까?

모달에 불필요한 공백이 없도록 폭을 정적으로 설정 한 fiddle을 만들었습니다.

This "너비"및 "최소 높이"속성을 사용하여 컨텐츠의 최소 크기에서 멈추고 50 % 너비와 높이로 확장됩니다. 서로 다른 화면 해상도가 media queries

그것이

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

도움을 희망 사용에 대해 서로 다른 스타일을 만들려면