首页 > 代码库 > 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制作弹出框插件
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。