<style>
#myDelDiv {
	font-family:'Helvetica', Verdana, sans-serif; 
	font-stretch: semi-condensed; 
	font-weight:bold;
	position: absolute;  
	z-index: 119;
	text-align: center;
	float:center;
	margin:0px auto;
  
  left: 50%;
  top: 30%;
   background-color: #ffffff; 
  transform: translate(-50%,-30%);
/*  border:1px solid #8c8c8c; 
  border: 1px solid #d3d3d3;*/
  -moz-box-shadow: 0 0 5px 3px #888;
  -webkit-box-shadow: 0 0 3px 5px#888;
  box-shadow: 1px 1px 8px #707070 ; 
  line-height:28px;
    width:70%;
	max-width:500px;
}

 
#myDelDivheader {
	font-family:'Helvetica', Verdana, sans-serif; 
	font-stretch:extra-condensed; 
	font-size:24px;
	font-weight: 600;	
	color: #404040;
	font-style: normal;

	background-color: #e60000; 
	padding: 5px 10px 5px 10px;
	cursor: move;
	z-index: 120;
	border-bottom: 1px solid #991f00;
	color: #fff;
}

#myDelDivfooter {
  padding: 10px 30px auto;
  z-index: 120;
  background-color: #f1f1f1;
  color: #fff;
  border-top: 1px solid #d3d3d3;
  height:60px;
}
 
.x_close { float:right;	cursor: pointer; font-size:34px; color:white;margin-top:0px;}

#myDelDivfooter a.button { float:right; margin-right:5px;text-align:center;}
</style>
 
 <div id="myDelDiv" hidden >
  <div id="myDelDivheader">ΔΙΑΓΡΑΦΗ ΕΓΓΡΑΦΗΣ
     <span onclick="document.getElementById('myDelDiv').style.display='none'" class="x_close" title="Close Modal">&times;</span>
  </div>
 
    <div id="id02" style="padding-bottom:15px;"  >
		<p>
			<h2>ΠΡΟΣΟΧΗ!!!</h2>  
				Η Επιλεγμένη εγγραφή θα διαγραφεί... Είσαι σίγουρος;
			<br>
        </p> 
	</div>
   
  <div id="myDelDivfooter"  >
      <table border="0" style="margin-top:10px;width:100%;">
	  <tr><td>
	      <a id="btnCancel" href="javascript:nothing();" class="button" style="margin-right:10px;" > Άκυρο </a>
	      &nbsp;
	      <a id="btnNo" href="javascript:nothing();" class="button" style=" width:60px;"> Οχι </a>
            &nbsp;
	      <a id="btnDeleteYes" href="javascript:nothing();" class="button" style="width:60px;"> Ναί </a>
	  </td></tr>
	  </table>
  </div>
</div>
 
<script>
//Make the DIV element draggagle:
dragElement(document.getElementById("myDelDiv"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    /* if present, the header is where you move the DIV from:*/
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

function nothing(){
	HideDelDiv();
}
</script>

 
