首页 > 代码库 > javascript制作弹出框插件

javascript制作弹出框插件

 1 var AI=AI||{}; //定义自己的库,防止冲突 2 AI.alertMsg=function(obj){ 3     var _title=obj.title||‘提示框‘; 4     var _message=obj.message||‘你没有设置提示内容‘; 5     var backgroundImg=obj.backgroundImg||"http://wegames.sinaapp.com/myImg/bg.png"; 6     var btnImg=obj.btnImg||"http://wegames.sinaapp.com/myImg/btn-ok.png"; 7     var winWidth=window.document.body.scrollWidth; 8     var winHeight=window.document.body.scrollHeight; 9     var winScrollTop=window.document.body.scrollTop;10 11     //创建遮罩层12     var master=document.createElement(‘div‘);13     master.style.width=winWidth+"px";14     master.style.height=winHeight+"px";15     master.style.background="rgba(0,0,0,0.7)";16     master.style.position="absolute";17     master.style.top=winScrollTop+"px";18     master.style.zIndex="999999";19 20     //消息框21     var msg=document.createElement(‘div‘);22     msg.style.width="80%";23     msg.style.margin="150px auto auto";24     msg.style.background="url(http://wegames.sinaapp.com/myImg/bg.png) no-repeat center center";25     msg.style.backgroundSize="auto 100%";26     msg.style.textAlign="center";27 28     //标题29     var title=document.createElement(‘div‘);30     title.style.width="70%";31     title.style.height="50px";32     title.style.fontSize="35px";33     title.style.lineHeight="35px";34     title.style.position="relative";35     title.style.margin="0 auto";36     title.style.padding="20px";37     title.style.color="#8F5C1F";38     title.innerHTML=_title;39     //消息主题40     var body=document.createElement(‘div‘);41     body.style.width="60%";42     body.style.fontSize="30px";43     body.style.lineHeight="30px";44     body.style.position="relative";45     body.style.margin="0 auto";46     body.style.paddingTop="10px";47     body.style.paddingBottom="20px";48     body.style.color="#956428";49     body.innerHTML=_message;50     //btn51     var btn=document.createElement(‘span‘);52     btn.style.width="146px";53     btn.style.height="56px";54     btn.style.display="inline-block";55     btn.style.background="url(http://wegames.sinaapp.com/myImg/btn-ok.png) no-repeat center center";56     btn.style.backgroundSize="146px 56px";57     btn.style.position="relative";58     btn.style.margin="0 auto";59     btn.style.padding="20px";60     btn.style.cursor="pointer";61     btn.onclick=function(){62         master.remove();63         document.onmousewheel=function(){};//禁掉滚轮事件64     }65     msg.appendChild(title);66     msg.appendChild(body);67     msg.appendChild(btn);68     master.appendChild(msg);69 70     document.body.insertBefore(master,null);71     document.onmousewheel=function(){return false;};//禁掉滚轮事件72 };
1 AI.alertMsg({2     "title":"测试标题",3     "message":"这是测试标题的消息内容,这个js的对象用起来还正是听明了给力的!!!!!",4 });

 

javascript制作弹出框插件