两种信息提示方式的对比：

在Web开发中，交互性地向用户作出一些提示，是一个不可缺少的开发需求。

最早的信息提示是使用警告对话框，如：

alert('信息提示。');

点击这里运行

这样的方式实现起来很简单，但有时会显得非常讨厌，因为你不得不对它进行回应。所以这种方式渐渐被抛弃，除非是向你询问“是否真的要删除它？”之类的信息时才会继续用它。

作为用户，在浏览网页希望得到一些提示，但除非是重要的提示，否则请不要让提示打扰到我。如果将信息放在一个安静的角落显示出来，停留一会儿后自行消失，那将是一个不错的解决方案。

如果你使用过Google文档或者Gmail，就会明白我说的无干扰信息模式的信息提示是什么意思。

本文后面所附的javascript代码正实现了以上需求，它的用法很简单，如下：

<script type="text/javascript" src="http://www.myfootprints.cn/jsLib/mfMessage.js"></script>
var oInfo = new mfMessage();
oInfo.showMessage('无干扰的信息提示。', true);

点击这里运行

以上代码中，var oInfo = new mfMessage(); 创建了一个信息显示对象，通过调用showMessage()方法即可在网页顶部显示指定的信息内容，而参数true，说明信息提示2秒钟后将自动消失。如果省略它，或者指定为false，那么，信息显示出来后，不会自行消失，而需要用户点击一下它才会消失（如果是重要的信息可以使用指定false，即使用户不点击信息，也不会对他/她造成干扰，因为它只占了一小块地方，而且是非模态的）。

如果你希望信息提示显示5秒钟（即5000毫秒）后再消失，可以指定显示时间为5秒，方法为：

<script type="text/javascript" src="http://www.myfootprints.cn/jsLib/mfMessage.js"></script>
var oInfo = new mfMessage();
oInfo.showMessage('无干扰的信息提示。', true, 5000);

点击这里运行

以下是mfMessage.js的源代码，你可以复制到自己的网页应用中，不用作任何修改它就会工作得很好。如果你将它改进得更好，也请慷慨地与我（admin@myfootprints.cn）分享。谢谢！

//
// mfMessage 对象
//
function mfMessage(sMessageWindowId) {
    this.message = '';
    if (sMessageWindowId) {
        this.messageWindowId = sMessageWindowId;
    } else {
        this.messageWindowId = 'mfMessageWindow';
    }
    this._init_ = false;
    // 通知window对象，在HTML文档加载完成后告诉我（mfMessage对象）一声
    this.addEventHandler(window, 'load', function() {
        window.isReady = true;
    });
}

mfMessage.prototype.init = function() {
    if (this._init_) { return; }
    // 只有在HTML文档加载完成后，本信息显示器才可以正常工作
    if(!window.isReady) {return;}
    var sMessageWindowId = this.messageWindowId;
    function hideMessage() {
        var oWin = document.getElementById(sMessageWindowId);
        oWin.style.display = 'none';
    }

    var oDocFragment = document.createDocumentFragment();
    var oWin = document.createElement('div');
    oWin.setAttribute('id', this.messageWindowId);
    oWin.style.display = 'none';
    // 其他CSS属性
    oWin.style.position = 'absolute';
    oWin.style.left = '0';
    oWin.style.top = '0';
    oWin.style.width = '100%';
    oWin.style.zIndex = '1001';
    oWin.style.textAlign = 'center';
    
    oDocFragment.appendChild(oWin);
    // 将文档碎片加入到页面的body中
    var oBody = document.getElementsByTagName('body')[0];
    oBody.insertBefore(oDocFragment, oBody.firstChild);
    this.addEventHandler(oWin, 'click', hideMessage);
    this._init_ = true;
};

mfMessage.prototype.showMessage = function(vMsg, bNonIntrusive, lDelay) {
    if (!this._init_) {
        this.init();
    }
    var sMessageWindowId = this.messageWindowId;
    function hideMessage() {
        var oWin = document.getElementById(sMessageWindowId);
        oWin.style.display = 'none';
    }
    var oWin = document.getElementById(this.messageWindowId);
    try {
        oWin.removeChild(oWin.firstChild);
    } catch (oError) {
    }
    var oMessage;
    if (vMsg.constructor == window.Array && vMsg.length > 1) {
        oMessage = document.createElement('ul');
        for (var i = 0; i < vMsg.length; i++) {
            var oMessageLI = document.createElement('li');
            var oMessageText = document.createTextNode(vMsg[i]);
            oMessage.appendChild(oMessageLI);
            oMessageLI.appendChild(oMessageText);
        }
    } else {
        oMessage = document.createTextNode(vMsg);
    }
    var oMessageWrapper = document.createElement('div');
    // 设置 oMessageWrapper 的CSS属性
    oMessageWrapper.style.padding = '5px';
    oMessageWrapper.style.color = 'black';
    oMessageWrapper.style.fontWeight = 'bold';
    oMessageWrapper.style.backgroundColor = '#FFF1A8';
    oMessageWrapper.style.cursor = 'pointer';
    oMessageWrapper.style.display = 'inline-block';
    oMessageWrapper.style.width = 'auto';
    oMessageWrapper.style.height = 'auto';
    oMessageWrapper.style.textAlign = 'left';
    oMessageWrapper.style.fontSize = '16px';
    oMessageWrapper.appendChild(oMessage);
    
    oWin.appendChild(oMessageWrapper);
    oWin.style.display = 'block';
    if (bNonIntrusive) {
        // 无干扰模式，启动计时器
        var lD;
        if (lDelay) {
            lD = lDelay;
        } else {
            lD = 2000;
        }
        window.setTimeout(hideMessage, lD);
    }
};

// 添加事件监听
mfMessage.prototype.addEventHandler = function(oTarget, sEventType, fnHandler, vArgument /* optional */) {
    //# 生成handler函数
    var handler;
    if (typeof (vArgument) == 'undefined') {
        handler = fnHandler;
    } else {
        handler = function() {
            fnHandler(vArgument);
        };
    }
    if (oTarget.addEventListener) {         // for DOM-compliant browsers
        oTarget.addEventListener(sEventType, handler, false);
    } else if (oTarget.attachEvent) {       // for IE
        oTarget.attachEvent("on" + sEventType, handler);
    } else {                                // for all others
        oTarget["on" + sEventType] = handler;
    }
};