首先说明，笔者并不擅长前端的东东，最近项目需求，被逼无奈作出下面的东西。
很多地方写的不理想，但是时间紧迫，将就着先用，以后有空再改。留此文备忘。~

注意：
因为力求精简，没有添加Jquery库，”$M”只是对Javascript的一些常用方法进行封装，想要滑入，滑出等效果的，请自行添加。
因为本身是为Android和Iphone做开发，所以应用了一些CSS3的效果,在Chrome、FF、Safari下效果也都是正常的，没有考虑也没测试过任意版本的IE

首先看下效果:

实现起来不算麻烦
首先弄个两个层，一个用来遮罩页面，一个用来显示消息。

<div id="msgPopupLayoutBg"></div>
<div id="msgPopupLayout">
    <div id="msgPopupLayoutInner">
        <div class="msgPopupLayoutTitle">我是标题</div>
        <div class="msgPopupLayoutContent">
            <p id="msgPopupLayoutContent">Message Content</p> 
            <div class="msgPopupLayoutClose">
                <input type="button" value="確定" class="base_font_size2" onclick="mbCommon.hideMsgPopupLayout();" />
            </div>
        </div>
    </div>
</div>

CSS样式
[CSS collapse=”true”]
/* Msg Popup Layout Start*/
#msgPopupLayoutBg
{
position:absolute;
top:0;
left:0;
background:#333;
width:100%;
height:100%;
filter:Alpha(Opacity=30);
-moz-opacity:0.5;
opacity:0.5;
display:none;
z-index:100;
}
#msgPopupLayout
{
position:absolute;
top:30%;
left:10%;
width:80%;
display:none;
padding:8px;
filter:progid:DXImageTransform.Microsoft.gradient(enabled=’true’,startColorstr=’#7F777777′, endColorstr=’#7F777777′);
background:rgba(85,85,85,0.5);
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
z-index:1000;
}
.msgPopupLayoutTitle
{
position:relative;
height:28px;
padding:0 20px 0 10px;
background:#3A6EA5;
color:#fff;
font-size:14px;
line-height:28px;
border-style:solid;
border-width:1px;
border-color:#4E84C0 #4780BE #0D1D3C #4780BE;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
text-shadow:0 1px 0 #000;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
}
.msgPopupLayoutContent
{
padding:5px;
background:#fff;
overflow:hidden;
-webkit-border-radius:0 0 10px 10px;
-moz-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
/*text-shadow:0 1px 0 #000; */
box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
}
.msgPopupLayoutClose{text-align:center;}
/* Msg Popup Layout End*/
[/CSS]
Javascript部分

function showMsgPopupLayout(popupContent)
    {
        $M('#msgPopupLayoutContent').html(popupContent);
        document.getElementById("msgPopupLayout").style.top = mbCommon.scrollY()+mbCommon.windowHeight()/2-document.getElementById("msgPopupLayout").clientHeight/2+"px";
        document.getElementById("msgPopupLayoutBg").style.top = mbCommon.scrollY();
        
        
        var _scrollWidth = document.body.scrollWidth;
        var _scrollHeight = document.body.scrollHeight;
        document.getElementById("msgPopupLayoutBg").style.width = _scrollWidth + "px";
        document.getElementById("msgPopupLayoutBg").style.height = _scrollHeight + "px";
        
        
        $M('#msgPopupLayout').show();
        $M("#msgPopupLayoutBg").show();
        return false;
    }
function hideMsgPopupLayout()
    {
        $M('#msgPopupLayout').hide();
        $M("#msgPopupLayoutBg").hide();
        return false;
    };
function pageY(elem){
      return elem.offsetParent? elem.offsetTop+pageY(elem.offsetParent) : elem.offsetTop;
    };
function scrollY(){  
        var de=document.documentElement;  
        return self.pageYOffset||(de&&de.scrollTop)||document.body.scrollTop;
    };
function windowHeight() {  
        var de = document.documentElement;  
        return self.innerHeight||(de && de.offsetHeight)||document.body.offsetHeight;
    }