JavaScript 풍선도움말(팝업)
페이지 정보
본문
샘플 : https://happyjung.com/demo/js/help_tip.html
<html>
<head>
<title>도움말 만들기</title>
<script>
var last_id = null;
function menu(id)
{
if (id != last_id)
{
if (last_id != null)
document.getElementById(last_id).style.display = "none";
document.getElementById(id).style.display = "block";
last_id = id;
}
else
{
document.getElementById(id).style.display = "none";
last_id = null;
}
}
// Internet Explorer에서 셀렉트박스와 레이어가 겹칠시 레이어가 셀렉트 박스 뒤로 숨는 현상을 해결하는 함수
// 레이어가 셀렉트 박스를 침범하면 셀렉트 박스를 hidden 시킴
// <div id=LayerID style="display:none; position:absolute;" onpropertychange="selectBoxHidden('LayerID')">
function selectBoxHidden(layer_id)
{
//var ly = eval(layer_id);
var ly = document.getElementById(layer_id);
// 레이어 좌표
var ly_left = ly.offsetLeft;
var ly_top = ly.offsetTop;
var ly_right = ly.offsetLeft + ly.offsetWidth;
var ly_bottom = ly.offsetTop + ly.offsetHeight;
// 셀렉트박스의 좌표
var el;
for (i=0; i<document.forms.length; i++) {
for (k=0; k<document.forms[i].length; k++) {
el = document.forms[i].elements[k];
if (el.type == "select-one") {
var el_left = el_top = 0;
var obj = el;
if (obj.offsetParent) {
while (obj.offsetParent) {
el_left += obj.offsetLeft;
el_top += obj.offsetTop;
obj = obj.offsetParent;
}
}
el_left += el.clientLeft;
el_top += el.clientTop;
el_right = el_left + el.clientWidth;
el_bottom = el_top + el.clientHeight;
// 좌표를 따져 레이어가 셀렉트 박스를 침범했으면 셀렉트 박스를 hidden 시킴
if ( (el_left >= ly_left && el_top >= ly_top && el_left <= ly_right && el_top <= ly_bottom) ||
(el_right >= ly_left && el_right <= ly_right && el_top >= ly_top && el_top <= ly_bottom) ||
(el_left >= ly_left && el_bottom >= ly_top && el_right <= ly_right && el_bottom <= ly_bottom) ||
(el_left >= ly_left && el_left <= ly_right && el_bottom >= ly_top && el_bottom <= ly_bottom) ||
(el_top <= ly_bottom && el_left <= ly_left && el_right >= ly_right)
)
el.style.visibility = 'hidden';
}
}
}
}
function selectBoxVisible()
{
for (i=0; i<document.forms.length; i++)
{
for (k=0; k<document.forms[i].length; k++)
{
el = document.forms[i].elements[k];
if (el.type == "select-one" && el.style.visibility == 'hidden')
el.style.visibility = 'visible';
}
}
}
var help_is_ie = navigator.userAgent.toLowerCase().indexOf("msie") != -1;
if (!help_is_ie) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
var prevdiv = null;
var timerID = null;
function getMouseXY(e)
{
if (help_is_ie) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
} else { // grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}
if (tempX < 0) {tempX = 0;}
if (tempY < 0) {tempY = 0;}
return true;
}
function help(id, left, top)
{
menu(id);
var el_id = document.getElementById(id);
//submenu = eval(name+".style");
submenu = el_id.style;
submenu.left = tempX - 50 + left;
submenu.top = tempY + 15 + top;
selectBoxVisible();
if (el_id.style.display != 'none')
selectBoxHidden(id);
}
</script>
</head>
<body>
도움말1<img src="https://happyjung.diskn.com/data/lecture/icon_help.gif" alt="풍선도움말" align="absmiddle" onclick="help('help1', 0, 0);" style="cursor:hand;">
<div id="help1" style="position:absolute; display:none; z-index:9999;">
<div id="csshelp1">
<div id="csshelp2">
<div id="csshelp3">도움말1 내용입니다.</div>
</div>
</div>
</div>
도움말2 <img src="https://happyjung.diskn.com/data/lecture/icon_help.gif" alt="풍선도움말" align="absmiddle" onclick="help('help2', 0, 0);" style="cursor:hand;">
<div id="help2" style="position:absolute; display:none; z-index:9999;">
<div id="csshelp1">
<div id="csshelp2">
<div id="csshelp3">도움말2 내용입니다.</div>
</div>
</div>
</div>
</body>
</html>
참고자료
그누보드
댓글목록
등록된 댓글이 없습니다.