2012-08-02 5 views
3

나는 모달 창이 나타나서 페이지의 독자 위치에 상대적으로 중심을 맞추기를 원합니다.고정을 사용하여 모달의 중심에 배치 : 세로 스크롤도 허용하는 방법?

.fixed { 
    position:fixed; 
    width:100px; 
    height:100px; 
    top:50%; 
    left:50%; 
    margin-left:-50px; 
    margin-top:-50px; 
} 

지금까지 너무 좋아, 모달 정확한 중앙에 팝업이를 달성하는 가장 좋은 방법은 위치에 고정/상위 50 %의 수정 될 것으로 보인다. 다른 위치에있는 div를 중첩하여,이를 달성하기 위해 http://jsfiddle.net/xwhMa/1

어떤 방법 : 여기 jsfiddle 참조 : 콘텐츠가 화면에 비해 너무 긴 경우 http://jsfiddle.net/cbqN2/

을하지만 내 사용자가 모달을 스크롤 할 수 있도록하려면 , 또는 JQuery를 최후의 수단으로 사용합니까?

+0

그것은 확실히 가능하지만, 확실히 자바 스크립트를 (필요한 것, 따라서 사용한다 jQuery). – KRyan

답변

1

이 기능이 작동하지 않습니까?

http://jsfiddle.net/demchak_alex/cbqN2/3/

모달은 고정 된 높이의 내용과 클립을 보유하고 용기를 가지고? 사용자는 모달을 스크롤 할 수 있습니다. jQuery 솔루션을 걱정하지 말고 모달 바깥 쪽을 스크롤하여 바닥에 닿을 때까지 바닥에 붙습니다.

0

이것은 단지 position: fixed의 특성입니다. :) .. 글쎄, 항상 화면에 고정 된 채로있어 라. 사용자가 페이지를 스크롤 할 때 가운데로 나타나지만 이동하려는 경우 position: absolute;이 아닌 fixed을 사용하면됩니다. 그래서 같이 : http://jsfiddle.net/skip405/cbqN2/2/

+0

예, 현재 포커스가있는 페이지 부분에 절대적으로 위치한 div를 "상대적"으로 표시하는 방법이 있습니까? 내 자신의 질문에 대답하려면 : 나는 JQuery를 통해 생성 된 절대 위치 값을 가질 수 있었고 사용자는 여전히 스크롤 할 수 있다고 생각합니다. 그것을 시도 할 것입니다. – Ila

4

난 안 이것은 당신이 요구하는지 경우 확신 해요,하지만이 시도 :

ul li {font-size:23px} 
.fixed { 
    width:200px; 
    height:200px; 
    background:red; 
    position:fixed; 
    top:50%; 
    left:50%; 
    margin-top:-100px; 
    margin-left:-100px; 
    **overflow-y:scroll** 
} 
관련 문제