弹出框插件

在做移动端HTML5游戏的时候，经常会遇到这样的情况,需要弹出简单的提示框，提示用户前一步操作的情况，或者成功，或者由于网络原因而失败，这个时候如果没有一个漂亮的提示框，用户体验就没有那么ok了，具体在移动端的效果如图2014-11-9(1)所示：

图 2014-11-9(1)

这是一个遮罩层提示框，显示提示框的时候，提示框之外全部遮罩，只有提示框上可以进行操作，这个功能进场用到，因此可以把他封装为一个通用的功能，以后每次使用的时候直接调用就行，开发会方便很多。

小面试主要的代码，我没有使用jquery类库，用的原生函数，要是用js类库的话会方便很多（此处觉得前辈们的智慧真厉害）：

var AI=AI||{}; //定义自己的库，防止冲突AI.alertMsg=function(obj){    var _title=obj.title||'提示框';    var _message=obj.message||'你没有设置提示内容';    var backgroundImg=obj.backgroundImg||"http://wegames.sinaapp.com/myImg/bg.png";    var btnImg=obj.btnImg||"http://wegames.sinaapp.com/myImg/btn-ok.png";    var winWidth=window.document.body.scrollWidth;    var winHeight=window.document.body.scrollHeight;    var winScrollTop=window.document.body.scrollTop;    //创建遮罩层    var master=document.createElement('div');    master.style.width=winWidth+"px";    master.style.height=winHeight+"px";    master.style.background="rgba(0,0,0,0.7)";    master.style.position="absolute";    master.style.top=winScrollTop+"px";    master.style.zIndex="999999";    //消息框    var msg=document.createElement('div');    msg.style.width="80%";    msg.style.margin="150px auto auto";    msg.style.background="url(http://wegames.sinaapp.com/myImg/bg.png) no-repeat center center";    msg.style.backgroundSize="auto 100%";    msg.style.textAlign="center";    //标题    var title=document.createElement('div');    title.style.width="70%";    title.style.height="50px";    title.style.fontSize="35px";    title.style.lineHeight="35px";    title.style.position="relative";    title.style.margin="0 auto";    title.style.padding="20px";    title.style.color="#8F5C1F";    title.innerHTML=_title;    //消息主题    var body=document.createElement('div');    body.style.width="60%";    body.style.fontSize="30px";    body.style.lineHeight="30px";    body.style.position="relative";    body.style.margin="0 auto";    body.style.paddingTop="10px";    body.style.paddingBottom="20px";    body.style.color="#956428";    body.innerHTML=_message;    //btn    var btn=document.createElement('span');    btn.style.width="146px";    btn.style.height="56px";    btn.style.display="inline-block";    btn.style.background="url(http://wegames.sinaapp.com/myImg/btn-ok.png) no-repeat center center";    btn.style.backgroundSize="146px 56px";    btn.style.position="relative";    btn.style.margin="0 auto";    btn.style.padding="20px";    btn.style.cursor="pointer";    btn.onclick=function(){        master.remove();        document.onmousewheel=function(){};//禁掉滚轮事件    }    msg.appendChild(title);    msg.appendChild(body);    msg.appendChild(btn);    master.appendChild(msg);    document.body.insertBefore(master,null);    document.onmousewheel=function(){return false;};//禁掉滚轮事件};

调用时候直接

AI.alertMsg({    "title":"测试标题",    "message":"这是测试标题的消息内容，这个js的对象用起来还正是听明了给力的！！！！！",});

就可以了，当然这里面的图片可以根据需求自己修改样式和大小，下面看一张效果图：

从图中可以看到效果还是不错的，好了，今天就到这里。

send me~