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