Confirm On Exit

การยืนยันการออกจากเพจ โดยการแสดงเว็บมืดๆ และมี Dialog ถามก่อนปิดหน้าเพจ

<html>
<style>
#overlay{
  background-color: #333;
  back\ground-color: transparent;
  background-image: url(blank.gif);
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}
</style>


<body>
ทดสอบ เพจนี้ คลิกออกไปเลยจ้า
</body>
</html>
<script>
// Add Event function
function addEvent(elm, evType, fn, useCapture) {
  // cross browser event handling for IE 5+, NS6+ and Gecko
  if (elm.addEventListener) {
    elm.addEventListener(evType, fn, useCapture);
    return true;
  } else if (elm.attachEvent) {
    var r = elm.attachEvent('on' + evType, fn);
    return r;
  } else {
    elm['on' + evType] = fn;
  }
}
  
// Add Listeners
function addListeners(e) {
  var objBody = document.getElementsByTagName("body").item(0);
  
  // create overlay div and hardcode some functional styles (aesthetic styles are in CSS file)
  objOverlay = document.createElement("div");
  objOverlay.setAttribute('id','overlay');
  objOverlay.style.visibility = 'hidden';
  objOverlay.style.position = 'absolute';
  objOverlay.style.top = '0';
  objOverlay.style.left = '0';
  objOverlay.style.zIndex = '90';
  objOverlay.style.width = '100%';
  objOverlay.style.height = document.body.clientHeight+ 'px';
  objBody.insertBefore(objOverlay, objBody.firstChild);
  
  // window unload listener
  addEvent(window, 'unload', exitAlert, false);
}
  
// Confirm exit needed
function exitAlert() {
  objOverlay.style.visibility = 'visible';
  return confirm('คุณแน่ใจ ที่จะออกจากเพจนี้?');
}

// Init
addEvent(window, 'load', addListeners, false);

</script>

Save As รูปนี้ไปด้วย overlay.png
ผู้เขียน goragod โพสต์เมื่อ 02 เม.ย. 2551 เปิดดู 10,101 ป้ายกำกับ Javascript
^