반응 라이트 박스

Question

저는 Instagram이나 Facebook (왼쪽 이미지, 오른쪽 코멘트 등)과 같은 팝업 환경을 만들기 위해 ajax 팝업을 Magnific Popups에 사용하고 있습니다. 전체 라이트 박스의 최대 높이를 설정하고 이미지를 세로 가운데에 배치 할 수있게하려면 어떻게해야합니까? 이것은 모든 브라우저에서 작동해야하며 까다로운 반응을 나타내야합니다. 모든 브라우저에서 제대로 작동하지 않는 것 같습니다. 이게 내가 필요로 할 수도있는 jQuery 솔루션에 신경 쓰지 않는다고 생각한다.

이미지와 같은 컨텐츠는 플로팅 :

.image_container, .content { 
    width: 50%; 
    float: left; 
} 

플로트 단지 미디어 쿼리를 사용하여 단축 된 화면 크기로 클리어된다.

나는 jsfiddle 내가 설명하기 위해 노력하고있어 이해하는 데 도움했습니다 :

jsFiddle

시도가 효과를 조사하기 위해 iframe을 다시 크기 조정.

Answer 1

가장 좋은 방법은 jqueryUI resize입니다.

당신이 당신의 DIV (컨테이너) 창으로 변경됩니다하려면

당신이 그렇게 somesing해야한다 크기 :

$(window).resize(function() { 
    var docheight = $(document).height(); 
    $("#container").height(docheight); 
}); 

Answer 2

Working Example

은 내가 호환성을 작업 한 생각 문제를 해결하고 최대 높이를 300px로 설정하고 IE6에 대한 해결 방법을 제공합니다.

JS :

$(document).ready(function() { 
    $('.popup-with-zoom-anim').magnificPopup({ 
     type: 'inline', 

     fixedContentPos: false, 
     fixedBgPos: true, 

     overflowY: 'auto', 

     closeBtnInside: true, 
     preloader: false, 

     midclick: true, 
     removalDelay: 300, 
     mainClass: 'my-mfp-zoom-in' 
    }); 
}); 

// Handles the resize event 
$(window).resize(fn_resizeImage); 
$('.popup-with-zoom-anim').click(fn_resizeImage); 
// Resizes the content2 to fit with image height 
function fn_resizeImage() { 
    var imgHeight = $('div.image_container > img').outerHeight(true); 
    var cnt1Height = $('div.content > div.content1').outerHeight(true); 
    var cnt2 = $('div.content > div.content2').outerHeight(imgHeight - cnt1Height); 
} 

CSS :

img { 
    width: 300px; 
} 
.view_container { 
    max-height:100%; 
    max-width: 850px; 
    _width:expression(this.scrollWidth > 850 ?"850px" :"auto"); 
    /* sets max-width for IE6 */ 
    margin: 20px auto; 
    background-color: #1C1C1C; 
    padding: 0; 
    line-height: 0; 
    border: 1px solid red; 
} 
.image_container, .content { 
    width: 50%; 
    float: left; 
} 
.image_container img { 
    max-height:300px; 
    _height:expression(this.scrollWidth > 300 ?"300px" :"auto"); 
    /* sets max-width for IE6 */ 
    max-width: 100%; 
    _width:expression(this.scrollWidth > 850 ?"850px" :"auto"); 
    /* sets max-width for IE6 */ 
} 
.image_container { 
    text-align: center; 
} 
.content1, .content2 { 
    background-color: #fff; 
    padding: 1em; 
} 
.content { 
    line-height: 1.231; 
} 
.content2 { 
    height: 300px; 
    overflow-y: scroll; 
} 
#small-dialog { 
    max-width: 850px; 
    _width:expression(this.scrollWidth > 850 ?"850px" :"auto"); 
    /* sets max-width for IE6 */ 
    margin: 20px auto; 
    background-color: #1C1C1C; 
    padding: 0; 
    line-height: 0; 
    border: 1px solid red; 
} 
@media (min-width: 1px) and (max-width: 638px) { 
    .image_container, .content { 
     width: auto; 
     float: none; 
     clear: both; 
    } 
    .image_container img { 
     max-height:150px; 
     max-width:150px; 
     _height:expression(this.scrollWidth > 150 ?"150px" :"auto"); 
     /* sets max-width for IE6 */ 
     _width:expression(this.scrollWidth > 150 ?"150px" :"auto"); 
     /* sets max-width for IE6 */ 
    } 
} 

Answer 3

같은 팝업 및 모달 박스와 같은 순수 CSS3 변환을 사용하여 페이지의 중간에 요소를 배치하는 방법이있다.

#myelem { width: 500px; height: 400px; position: fixed; top: 50%; left: 50%; background: red; transform: translate(-50%, -50%); }

<div id="myelem"></div>

브라우저 공급 업체 접두사 (예 : -webkit- 및 -moz-)의 모든 잊지 마세요. 구식 브라우저 (IE9 이하)는 transform을 전혀 인식하지 못합니다. 당신은 그들을위한 자바 스크립트 polyfill이 필요합니다.

Answer 4

나는 모든 질문을 이해 확실하지 오전하지만이 방법 당신 수직 및 수평 중심 이미지 :

데모 : http://jsbin.com/ukowar/1/edit

이와 함께 절대 위치를 통해 중심으로 margin:auto

img { 
    width:200px; 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    margin:auto; 
} 

호프가 문제의 일부로 도움이됩니다.