본문 바로가기

컴터/Javascript / html

alert 창 대신 레이어로 띄우기

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script type="text/javascript">
 /*출처 http://gstarclub.springnote.com/pages/454921*/
 var selectedobj;
 var dragapproved = false;
 var zindex = 100;
 function drag_move(){
  if(dragapproved){
   selectedobj.style.left = base_x + event.clientX - previous_x;
   selectedobj.style.top  = base_y + event.clientY - previous_y;
   return false;
  }
 }
 function start_drag(drag_id){
  selectedobj = document.getElementById(drag_id);
  selectedobj.style.zIndex = zindex++;
  selectedobj.style.cursor = 'hand';
  base_x = parseInt(selectedobj.style.left);
  base_y = parseInt(selectedobj.style.top);
  previous_x = event.clientX;
  previous_y = event.clientY;
  dragapproved = true;
  selectedobj.onmousemove = drag_move;
  selectedobj.onmouseup = drag_release;
 }
 function drag_release(){
    dragapproved=false;
 }
 /*출처 http://gstarclub.springnote.com/pages/454921*/

 function layerSize(){

  layer = document.createElement("div");
 
  layer.id = "alertBgDiv";
  layer.style.position = 'absolute';
  layer.style.top = 0;
  layer.style.left = 0;
  layer.style.width = '100%';
  layer.style.height = '100%';
  layer.style.background = '#000';
  layer.style.zIndex = 0;
 
  layer.style.filter = 'alpha(opacity=60, style=0)';

  document.body.appendChild(layer);

  return layer.id;
 }

 function cancelLayer(){  
  document.body.removeChild(document.getElementById('alertBgDiv'));
  document.body.removeChild(document.getElementById('alertDiv'));
 }

 function clientInner(msg, yes, yesLink, no ,noLink, cancel){
  idx = clientLayer();
 
  document.getElementById(idx).innerHTML = "<table border='0' cellpadding='15' cellspacing='0' width='100%'><tr><td height='25' onmousedown=\"start_drag('alertDiv');\"></td><tr><tr><td height='110'>"
              + msg
              + "</td></tr><tr><td align='center'>"
              + "<a href='"+yesLink+"'><img src='"+yes+"' border='0' /></a>"
              + "   <a href='"+noLink+"'><img src='"+no+"' border='0' /></a>"
              + "   <a href='#none' onclick='cancelLayer();'><img src='"+cancel+"' border='0' /></a>"
              + "</td></tr>";
 }    

 function clientLayer(){
  idx = layerSize();
 
  h = document.body.clientHeight;
  w = document.body.clientWidth;

  layer = document.createElement("div");
  layer.id = "alertDiv";
  layer.style.position = 'absolute';
  layer.style.width = 300;
  layer.style.height = 200;
  layer.style.background = 'url(bg.gif) no-repeat 0 0; #fff';
  layer.style.left = w / 2 - 150;
  layer.style.top = h / 2 - 100;
  layer.style.zIndex = 5;

  document.body.appendChild(layer);

  return layer.id;
 }
 
</script>
<style>
table {font-size:9pt;}
</style>

<body topmargin="0" leftmargin="0">
 
<center>
<br /><br /><br /><br /><br />
 <a href="#none" onclick="clientInner('정말 지울까요~~~?', 'yes.gif', 'http://yes.com', 'no.gif', 'http://no.com', 'cancel.gif');"> <h1>지우기</h1> </a>

 clientInner('메시지', 'yes 이미지', 'yes 이동', 'no 이미지', 'no 이동경로', 'cancel 이미지');
 
</center>

</body>