Message box in the middle of the screen or near parent element and also an alternative to alert
<div onclick="showInfoBox(this,false,'Hello world') />
function showInfoBox(senderElement,isCenterInfoBoxInMiddleOfScreen, txtToDisplay) {
// the entire div containing the message
var infoDiv = document.createElement('div');
infoDiv.style.cssText = 'display:hidden'; // fixes bug of 1 second flash before calling the hide() function later
infoDiv.className = "infoBox";
infoDiv.setAttribute("onclick", "window.event.cancelBubble = true;");
// span with text from txtToDisplay variable
var txtSpan = document.createElement('div');
txtSpan.innerHTML = "<br/><br/><br/>" + txtToDisplay + "<br/><br/><br/>";
infoDiv.appendChild(txtSpan);
// button to close the info box
var closeButton = document.createElement('img');
closeButton.src = "/images/close.png";
closeButton.style.position = "absolute";
closeButton.style.cssText = 'position: absolute; top:0px; right:0px; text-align:right';
// onclick disbale the infobox and re enable the original onclick on the sender which opened it
closeButton.onclick = function () { $(this).parent().fadeOut("slow"); senderElement.onclick = senderElement._originalonclick; };
infoDiv.appendChild(closeButton);
senderElement.appendChild(infoDiv);
if (isCenterInfoBoxInMiddleOfScreen) {// the following line should stay after appendChild for the .height() method to work
infoDiv.style.cssText = 'position: fixed; right: 0; left: 0; top:0; bottom:0; margin-top:auto; margin-bottom:auto; margin-right: auto; margin-left: auto; height:' + $(txtSpan).height() + 'px';
}
else
infoDiv.style.cssText = 'position: absolute;';
$(infoDiv).hide().fadeIn("slow"); // show the info div on the document
// disable the onclick on the sender in order not to create multiple instances, and save its original function in "_originalonclick"
senderElement._originalonclick = senderElement.onclick;
senderElement.onclick = function () { return false; };
}
תוכנה לעסקים
052-663-5054
כתובת
מייל
