Confirm On Exit
การยืนยันการออกจากเพจ โดยการแสดงเว็บมืดๆ และมี Dialog ถามก่อนปิดหน้าเพจ
Save As รูปนี้ไปด้วย overlay.png
<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