div의 중심에 팝업 메시지를 배치하는 방법은 무엇입니까?

아래의 계산을 기준으로 너비와 높이를 계산할 div 블록이 있습니다. 이제 div 블록 사이에 메시지 홀더 블록을 배치하려고합니다.div의 중심에 팝업 메시지를 배치하는 방법은 무엇입니까?

제 목표는 "oID_1"div의 중심에 "popup"블록 메시지를 표시하는 것입니다. 아무도 나를 도울 수 있습니까?

<BODY> 
    <head> 
    <script> 
    function msgBox(message) { 
    var msgbox = document.getElementById("msgbox"); 
    msgbox.innerHTML = message; 
    var x = (window.innerWidth/2) - (msgbox.offsetWidth/2); 
    var y = (window.offsetHeight/2) - (msgbox.offsetHeight/2);    
    msgbox.style.top = y; 
    msgbox.style.left = x; 
    msgbox.style.display = "block"; 
    } 
</script> 
<style type="text/css"> 
    .popup { 
    width:100px; 
    height:100px; 
    position:absolute; 
    display:none; 
    border:1px solid green; 
    } 
</style> 
<script type="text/javascript"> 
    function showPopup(id) { 
    var popup = document.getElementById(id); 
    var divblock=document.getElementById('oID_1'); 
    width=parseInt(oID_1.style.width); 
    var x = (width/2) - (popup.offsetWidth/2); 
    var y = (divblock.offsetHeight/2) - (popup.offsetHeight/2);    
    popup.style.top = y; 
    popup.style.left = x; 
    popup.style.display = "block"; 
    } 
</script> 
</head> 
<DIV CLASS="body"> 
    <center> 
    <div id="popup" class="popup"> 
    This a vertically and horizontally centered popup. 
    </div> 
    <a onclick="showPopup('popup');">Show Popup</a> 
    <DIV ID="oID_1" STYLE=" width:300; height:300;border:1px solid red"> 
    </DIV> 
    </center> 
</DIV> 
</BODY>

출처

2012-07-26 Kunal Vashist

왜 몸에 머리 태그가 있습니까? –

지금 div의 중심에있는 "oID_1"요소는 위치가없고 단지 2 픽셀 밖에되지 않습니다. 요소 내부에 요소를 배치하려면 어떻게해야합니까? 그리고 그 '

'태그는 사용해서는 안되며 머리는 몸 안에 있어야합니다. 기본으로 돌아가서 기본 HTML과 CSS를 먼저 배워야합니다. – adeneo

@AaditMShah 당신의 졸이 도움이되지 않습니다 ...수락에 대해 묻는 것을 그만 두시겠습니까 –

jQuery를 사용할 수 있습니까? 살펴보기 center-div-with-jquery

출처

2012-07-26 09:10:12

예 할 수 있습니다 .... –

div에 가운데 놓기를 원하지 않습니다. 해당 팝업 메시지가 가운데에 놓이기를 원합니다. –

Windows 내부 또는 DIV 내부의 센터는 거의 같습니다. 그것의 이론적 인 개념은 같습니다. –

요소가 절대 위치에 있고 폭을 알고 있다면 왼쪽 : 50 %; 여백 왼쪽 : - (반 폭) 픽셀

출처

2012-07-26 09:13:53 simoncereska

나는 CSS 상위에 추가 : 50 %; 왼쪽 : 50 %; 하지만 내 경우에도 도움이 안되네 –

이 div에 표시해야하는 경우 #pidup에 #pidup을 추가하십시오 – simoncereska

아무것도 변경되지 않았습니다 –

는 다음 웹 사이트에서보세요 : http://bushraaadit.appspot.com/이

이제 그들은 사업부를 중심으로 한 방법은 매우 간단합니다. 먼저 HTML 구조를 살펴 보겠습니다.

<div id="container"> 
    <div id="wrapper"> 
     <div id="center"></div> 
    </div> 
</div>

좋아요, 그래서 3 개의 중첩 된 div가 있습니다. 첫 번째 부분 (container)은 세 번째 div (center)를 가운데 맞추려는 div입니다. 두 번째 div (wrapper)는 가운데 맞춤을 돕는 데 사용됩니다. 그것을 수평 및 수직으로 센터링하는 중앙 태그라고 생각하십시오.

이제 CSS (예 : CSS에만 적용되며 container div의 크기를 조정하면 자동으로 다시 중심에 위치 함). 원하는 너비와 높이로 container div를 지정하십시오. 이제 wrapper 및 center div가 표시됩니다.

wrapper DIV

는에게 center DIV 동일한 폭과 높이를 가져야한다. center div에 명시된 너비와 높이 (예 : 컨테이너의 50 %)가 필요한 경우 wrapper에 설정하고 center의 너비와 높이를 100 % (컨테이너의 50 %의 100 %)로 설정합니다. 그렇지 않으면 wrapper을 왼쪽으로 플로트하십시오 (이렇게하면 자동으로 center div 크기로 축소됩니다).

마지막으로 가운데에 맞추려면 먼저 wrapper 및 center의 위치를 상대적으로 설정하십시오. 그런 다음 wrapper div는 오른쪽에 50 %, 아래쪽에 위치합니다 (컨테이너의 50 %). 그런 다음 center div는 왼쪽에서 50 %, 위쪽에서 최상위로 배치됩니다 (그 자체의 50 % 인 wrapper의 50 %).

html, body, #container { 
    height: 100%; 
    width: 100%; 
} 

body { 
    margin: 0; 
} 

#container { 
    background-color: #FFF0F5; 
} 

#wrapper { 
    height: 50%; 
    left: 50%; 
    position: relative; 
    top: 50%; 
    width: 50%; 
} 

#center { 
    background-color: #FFE4E1; 
    bottom: 50%; 
    height: 100%; 
    position: relative; 
    right: 50%; 
    width: 100%; 
}

최종 결과가이 바이올린에서 볼 수있다 : http://jsfiddle.net/a3kVj/

희망 도움이

결과 CSS

은 같은 것입니다.

출처

2012-07-26 10:02:32

div의 중심에 팝업 메시지를 배치하는 방법은 무엇입니까?

답변

관련 문제