标签：style blog http io color ar os 使用 sp
在做移动端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的对象用起来还正是听明了给力的！！！！！", });
就可以了，当然这里面的图片可以根据需求自己修改样式和大小，下面看一张效果图：
从图中可以看到效果还是不错的，好了，今天就到这里。
标签：style blog http io color ar os 使用 sp
原文地址：http://www.cnblogs.com/iforever/p/4085133.html
