자바스크립트 질문 해도 될까요? 정보
자바스크립트 질문 해도 될까요?
본문
오류가 나는곳의 주소를 알려주시면 더 빠르고 정확하게 답변 받을 수 있습니다.
오류 주소 :
해당 자바스크립트는 레이어 팝업 자바스크립트 입니다
롤 오버시, 클릭시 작동할 수 있고
팝업된 레이어를 클릭시, 해당 버튼 롤 아웃시 사라지게 하는 유용한 자바스크립트이니 필요하신분은 이용하셔도 될 듯 합니다
=== 여기서 문제는 일반 페이지에서 사용되는 이 자바스크립트가 내용이 상당히 길어질 경우 팝업 레이어의 위치가 맨 위로 올라가 버려서 곤란하다는 것입니다
해당 자바스크립트 샘플을 올려보겠습니다
=== 해당 자바스크립트의 <body> 문 위에 <br>테그문을 2~30번 정도 작성해 보시면 뭐가 문제인지 아실 것입니다
=======================================================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
/*
명칭 : 마리홈 이름 팝업 레이어
종류 : context menu
제작자 : 예뜨락
*/
// 사용자 설정 부분
Layer_popup_close=2; //메뉴 닫는 방법 1(클릭으로 닫음 )또는 2(마우스 아웃으로 닫음 )
var satuas; //마우스가 팝업창 위에 놓여 있는지를 알기 위한 전역변수 선언
function popup_Layer(event,popup_name) { //팝업레이어 생성
var main,_tmpx,_tmpy,_marginx,_marginy;
main = document.getElementById(popup_name);
if(Layer_popup_close==2){
satuas=1;//클릭으로 인한 닫힘 방지를 위해
}
main.style.display = '';//팝업 생성
_tmpx = event.clientX+parseInt(main.offsetWidth);
_tmpy = event.clientY+parseInt(main.offsetHeight);
_marginx = document.body.clientWidth - _tmpx;
_marginy = document.body.clientHeight - _tmpy;
// 좌우 위치 지정
if(_marginx < 0){//우측;
main.style.left = event.clientX + document.body.scrollLeft + _marginx-2+"px";
}
else{
main.style.left = event.clientX + document.body.scrollLeft-5+"px";
}
//높이 지정
if(_marginy < 0){//아래부분;
main.style.top = event.clientY + document.body.scrollTop + _marginy-5+"px";
}
else{
main.style.top = event.clientY + document.body.scrollTop-5+"px";
}
}
function mouse_anchor(type){ //마우스의 위치에 따른 팝업의 닫음을 결정
if(type=="1"){
satuas="1";
}
if(type=="0"){
satuas="0";
}
}
function Layer_popup_Off() { //팝업 닫음
if(satuas=="0"){
document.getElementById("popup_table").style.display = "none";
}
if(Layer_popup_close==2){
satuas=null;
}
}
function mouseout_close() {
window.setTimeout('Layer_popup_Off()',850);
}
if(Layer_popup_close==1){
document.onmousedown = Layer_popup_Off;//클릭으로 닫기
}
if(Layer_popup_close==2){
document.onmouseover=mouseout_close;//레이어 벋어나면 닫기
}
</script>
</head>
<body>
<div id='popup_table' style="position:absolute; left:0px; top:0px; z-index:1;display:none;" onmouseover="mouse_anchor('1');" onmouseout="mouse_anchor('0');">
<table border="1" width="200">
<tr>
<td height="217" valign="top">
들어갈 내용
</td>
</tr>
</table>
</div>
<table border="1" width="982">
<tr>
<td width="105" height="48" align="center" valign="middle">
<a onclick="popup_Layer(event,'popup_table');" style="CURSOR: pointer;">팝업 생성 </a>
</td>
<td width="748" height="48" align="center" valign="middle">
<a onclick="popup_Layer(event,'popup_table');" style="CURSOR: pointer;">팝업 생성 </a>
</td>
<td width="107" height="48" align="center" valign="middle">
<a onclick="popup_Layer(event,'popup_table');" style="CURSOR: pointer;">팝업 생성 </a>
</td>
</tr>
<tr>
<td width="105" height="517" align="center" valign="middle">
<a onclick="popup_Layer(event,'popup_table');" style="CURSOR: pointer;">팝업 생성 </a>
</td>
<td width="748" height="517" align="center" valign="middle">
<a onclick="popup_Layer(event,'popup_table');" style="CURSOR: pointer;">팝업 생성 </a>
</td>
<td width="107" height="517" align="center" valign="middle">
<a onclick="popup_Layer(event,'popup_table');" style="CURSOR: pointer;">팝업 생성 </a>
</td>
</tr>
<tr>
<td width="105" height="33" align="center" valign="middle">
<a onclick="popup_Layer(event,'popup_table');" style="CURSOR: pointer;">팝업 생성 </a>
</td>
<td width="748" height="33" align="center" valign="middle">
<a onclick="popup_Layer(event,'popup_table');" style="CURSOR: pointer;">팝업 생성 </a>
</td>
<td width="107" height="133" align="center" valign="middle">
<a onclick="popup_Layer(event,'popup_table');" style="CURSOR: pointer;">팝업 생성 </a>
</td>
</tr>
</table>
</body>
</html>
======================================================================================
해당 팝업창의 위치를 "마우스 포인터를 중심으로 가운데" 들어오게 하려면 어떻게 해줘야 할까요?
오류 주소 :
해당 자바스크립트는 레이어 팝업 자바스크립트 입니다
롤 오버시, 클릭시 작동할 수 있고
팝업된 레이어를 클릭시, 해당 버튼 롤 아웃시 사라지게 하는 유용한 자바스크립트이니 필요하신분은 이용하셔도 될 듯 합니다
=== 여기서 문제는 일반 페이지에서 사용되는 이 자바스크립트가 내용이 상당히 길어질 경우 팝업 레이어의 위치가 맨 위로 올라가 버려서 곤란하다는 것입니다
해당 자바스크립트 샘플을 올려보겠습니다
=== 해당 자바스크립트의 <body> 문 위에 <br>테그문을 2~30번 정도 작성해 보시면 뭐가 문제인지 아실 것입니다
=======================================================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
/*
명칭 : 마리홈 이름 팝업 레이어
종류 : context menu
제작자 : 예뜨락
*/
// 사용자 설정 부분
Layer_popup_close=2; //메뉴 닫는 방법 1(클릭으로 닫음 )또는 2(마우스 아웃으로 닫음 )
var satuas; //마우스가 팝업창 위에 놓여 있는지를 알기 위한 전역변수 선언
function popup_Layer(event,popup_name) { //팝업레이어 생성
var main,_tmpx,_tmpy,_marginx,_marginy;
main = document.getElementById(popup_name);
if(Layer_popup_close==2){
satuas=1;//클릭으로 인한 닫힘 방지를 위해
}
main.style.display = '';//팝업 생성
_tmpx = event.clientX+parseInt(main.offsetWidth);
_tmpy = event.clientY+parseInt(main.offsetHeight);
_marginx = document.body.clientWidth - _tmpx;
_marginy = document.body.clientHeight - _tmpy;
// 좌우 위치 지정
if(_marginx < 0){//우측;
main.style.left = event.clientX + document.body.scrollLeft + _marginx-2+"px";
}
else{
main.style.left = event.clientX + document.body.scrollLeft-5+"px";
}
//높이 지정
if(_marginy < 0){//아래부분;
main.style.top = event.clientY + document.body.scrollTop + _marginy-5+"px";
}
else{
main.style.top = event.clientY + document.body.scrollTop-5+"px";
}
}
function mouse_anchor(type){ //마우스의 위치에 따른 팝업의 닫음을 결정
if(type=="1"){
satuas="1";
}
if(type=="0"){
satuas="0";
}
}
function Layer_popup_Off() { //팝업 닫음
if(satuas=="0"){
document.getElementById("popup_table").style.display = "none";
}
if(Layer_popup_close==2){
satuas=null;
}
}
function mouseout_close() {
window.setTimeout('Layer_popup_Off()',850);
}
if(Layer_popup_close==1){
document.onmousedown = Layer_popup_Off;//클릭으로 닫기
}
if(Layer_popup_close==2){
document.onmouseover=mouseout_close;//레이어 벋어나면 닫기
}
</script>
</head>
<body>
<div id='popup_table' style="position:absolute; left:0px; top:0px; z-index:1;display:none;" onmouseover="mouse_anchor('1');" onmouseout="mouse_anchor('0');">
<table border="1" width="200">
<tr>
<td height="217" valign="top">
들어갈 내용
</td>
</tr>
</table>
</div>
<table border="1" width="982">
<tr>
<td width="105" height="48" align="center" valign="middle">
<a onclick="popup_Layer(event,'popup_table');" style="CURSOR: pointer;">팝업 생성 </a>
</td>
<td width="748" height="48" align="center" valign="middle">
<a onclick="popup_Layer(event,'popup_table');" style="CURSOR: pointer;">팝업 생성 </a>
</td>
<td width="107" height="48" align="center" valign="middle">
<a onclick="popup_Layer(event,'popup_table');" style="CURSOR: pointer;">팝업 생성 </a>
</td>
</tr>
<tr>
<td width="105" height="517" align="center" valign="middle">
<a onclick="popup_Layer(event,'popup_table');" style="CURSOR: pointer;">팝업 생성 </a>
</td>
<td width="748" height="517" align="center" valign="middle">
<a onclick="popup_Layer(event,'popup_table');" style="CURSOR: pointer;">팝업 생성 </a>
</td>
<td width="107" height="517" align="center" valign="middle">
<a onclick="popup_Layer(event,'popup_table');" style="CURSOR: pointer;">팝업 생성 </a>
</td>
</tr>
<tr>
<td width="105" height="33" align="center" valign="middle">
<a onclick="popup_Layer(event,'popup_table');" style="CURSOR: pointer;">팝업 생성 </a>
</td>
<td width="748" height="33" align="center" valign="middle">
<a onclick="popup_Layer(event,'popup_table');" style="CURSOR: pointer;">팝업 생성 </a>
</td>
<td width="107" height="133" align="center" valign="middle">
<a onclick="popup_Layer(event,'popup_table');" style="CURSOR: pointer;">팝업 생성 </a>
</td>
</tr>
</table>
</body>
</html>
======================================================================================
해당 팝업창의 위치를 "마우스 포인터를 중심으로 가운데" 들어오게 하려면 어떻게 해줘야 할까요?
댓글 전체