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     //btn
51     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 });