#modalContainer > #alertBox { position:fixed; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <style> #modalContainer { background-color:transparent; position:absolute; width:100%; height:100%; top:0px; left:0px; z-index:10000; background-image:url(tp.png); /* required by MSIE to prevent actions on lower z-index elements */ } #alertBox { width:300px; min-height:100px; border:2px solid #999; background-color:#F2F5F6; background-image:url(alert.png); background-repeat:no-repeat; background-position:20px 30px; } #modalContainer > #alertBox { position:fixed; } #alertBox h1 { margin:1px; font:bold 12px verdana,arial; background-color:#367cab; color:#FFF; border-bottom:1px solid #000; padding:2px 0 2px 5px; } </style> <script type="text/javascript"> var ALERT_TITLE = "Message from etranscribe"; var ALERT_BUTTON_TEXT = "Ok"; var DeletionConfirmation = 0; var isMozilla; var objDiv = null; var over = false; if(document.getElementById) { window.alert = function(txt) { createCustomAlert(txt); } } function createCustomAlert(txt) { Initialize(); d = document; if(d.getElementById("modalContainer")) return; mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div")); mObj.id = "modalContainer"; alertObj = mObj.appendChild(d.createElement("div")); alertObj.id = "alertBox"; alertObj.style.visiblity="visible"; h1 = alertObj.appendChild(d.createElement("h1")); h1.appendChild(d.createTextNode(ALERT_TITLE)); h1.onmouseover= function() {over=true;return false;} h1.onmouseout= function() {over=false;return false;} h1.style.cursor="move"; //alertObj.style.display = "block"; } function removeCustomAlert() { document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer")); } function AlertMsg() { alert('This is a custom alert dialog that was created by over-riding the window.alert method.'); } function Initialize() { // check browser isMozilla = (document.all) ? 0 : 1; if (isMozilla) { document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP); } document.onmousedown = MouseDown; document.onmousemove = MouseMove; document.onmouseup = MouseUp; } function MouseDown(e) { if (over) { if (isMozilla) { objDiv = document.getElementById('alertBox'); X = e.layerX; Y = e.layerY; return false; } else { objDiv = document.getElementById('alertBox'); objDiv = objDiv.style; X = event.offsetX; Y = event.offsetY; } } } function MouseMove(e) { if (objDiv) { if (isMozilla) { objDiv.style.top = (e.pageY - Y) + 'px'; objDiv.style.left = (e.pageX - X) + 'px'; return false; } else { objDiv.pixelLeft = event.clientX - X + document.body.scrollLeft; objDiv.pixelTop = event.clientY - Y + document.body.scrollTop; return false; } } } function MouseUp() { objDiv = null; } </script> <body> <input type="button" value = "Alert" onclick="AlertMsg()" /> </body> </html>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)