티스토리 뷰

WEB/JavaScript

alert창대신 layer를 띠우기

주년 2011. 10. 11. 14:12
alert창대신 layer를 띠우기

<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>


http://nosmoke.tistory.com/222

저작자표시 비영리 변경금지

'WEB > JavaScript' 카테고리의 다른 글

자바스크립트 모음  (0) 2011.10.11
자바스크립트 split 문자열자르기  (0) 2011.10.11
Javascript 아이디 중복 체크시 숫자/영문만 입력되도록 체크 함수  (0) 2011.10.11
자바스크립트 강의[2]  (0) 2011.10.11
자바스크립트 checked 사용 법  (2) 2011.10.11