弹出框插件

在做移动端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~