首页 > 代码库 > 弹出框插件

弹出框插件

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

Screenshot_2014-11-09-10-52-11

图 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的对象用起来还正是听明了给力的!!!!!",});

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

2014-11-09_150419

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

send me~

弹出框插件