最近因为项目需要，写了一个模拟弹窗的插件，代码不是很优雅，有时间改一下，欢迎拍砖
js代码：
1 /*
2 *selfWindow组建，主要是用于模拟移动网站的alert(),confirm()窗口点解某一按钮跳转到某一个页面的效果,
3 *因为给予移动web，所以没有兼容低版本ie
4 *调用方法：var win = new SelfWinsow({
5 * types : "confirm",//这里可以选择的参数有，alert,confirm,confirm2,link
6 * slefTitle : "香送网温馨提示",//弹窗标题
7 * selfInfo : "Are you really to remove this tool?",//弹窗信息
8 * selfOk : "YES",//自定义确定按钮文字
9 * selfNo : "NO",//自定义否认按钮文字
10 * callback:fn,//当types为confirm,confirm2或者是talk时的回调函数，confirm为模拟传统的confirm弹窗，confirm2根据只需要一个按钮的需求定制的，talk则是模拟传统的prompt窗口
11 * linkTo1:"http://blog.sina.com.cn/s/blog_a261421801017wgo.html",//当types为link时第一个按钮的链接
12 * linkTo1:"http://blog.sina.com.cn/s/blog_a261421801017wgo.html",//当types为link时第二个按钮的链接
13 * })
14 *如果不传任何参数，或者配置直接为一个字符串，将默认调用alert,如 new selfWinson() 或者 new selfWinsow("你确定要离开吗？")
15 *组建还有很多需要改进的地方，欢迎提出改进建议
16 *开发者：农的传人
17 *开发者邮箱：[email protected]
18 */
19
20 var SelfWinsow = function(settings){this.init(settings)};
21 SelfWinsow.prototype = {
22 init:function(settings){
23 this.opts = {
24 types : "alert",
25 slefTitle : "香送网温馨提示",
26 selfInfo : typeof settings == "string" ? settings : "相送网温馨提示",
27 selfOk : "确定",
28 selfNo : "不"
29 };
30
31 this.setting(settings);
32 if(typeof settings == "string"){
33 this.opts.selfInfo == settings;
34 }
35 if(settings == "" || settings == undefined || settings == null){
36 this.selfAlert();
37 }else if(settings.types == "confirm"){
38 this.selfConfirm();
39 }else if(settings.types == "confirm2"){
40 this.selfConfirm2();
41 }else if(settings.types == "link"){
42 this.selfLink();
43 }else if(settings.types=="talk"){
44 this.selfMobileTalk();
45 }else{
46 this.selfAlert();
47 }
48 },
49 //confirm窗口
50 selfConfirm:function(){
51 var _this = this;
52 var html="<div id=‘selfWinsow‘><div id=‘slefClose‘><\/div><h2 id=‘slefTitle‘>"+_this.opts.slefTitle+"<\/h2><p id=‘selInfo‘>"+_this.opts.selfInfo+"<\/p><div id=‘selfOk‘ class=‘selfBt selfBtDouble‘>"+_this.opts.selfOk+"<\/div><div id=‘selfNo‘ class=‘selfBt selfBtDouble‘>"+_this.opts.selfNo+"<\/div><\/div>";
53 this.createMask(html);
54 this.selfEvents();
55 },
56
57 //alert窗口
58 selfAlert:function(){
59 var _this = this;
60 var html="<div id=‘selfWinsow‘><div id=‘slefClose‘><\/div><h2 id=‘slefTitle‘>"+_this.opts.slefTitle+"<\/h2><p id=‘selInfo‘>"+_this.opts.selfInfo+"<\/p><div id=‘selfOk‘ class=‘selfBt selfBtSingle‘>"+_this.opts.selfOk+"<\/div><\/div>";
61 this.createMask(html);
62 this.selfEvents();
63 },
64 selfConfirm2:function(){
65 var _this = this;
66 var html="<div id=‘selfWinsow‘><div id=‘slefClose‘><\/div><h2 id=‘slefTitle‘>"+_this.opts.slefTitle+"<\/h2><p id=‘selInfo‘>"+_this.opts.selfInfo+"<\/p><div id=‘selfOk‘ class=‘selfBt selfBtSingle‘>"+_this.opts.selfOk+"<\/div><\/div>";
67 this.createMask(html);
68 this.selfEvents();
69 },
70 //带链接窗口
71 selfLink:function(){
72 var _this = this;
73 var html="<div id=‘selfWinsow‘><div id=‘slefClose‘><\/div><h2 id=‘slefTitle‘>"+_this.opts.slefTitle+"<\/h2><p id=‘selInfo‘>"+_this.opts.selfInfo+"<\/p><a id=‘selfOk‘ href=‘"+_this.opts.linkTo1+"‘ class=‘selfBt selfBtDouble‘>"+_this.opts.selfOk+"<\/a><a id=‘linkTo2‘ href=‘"+_this.opts.linkTo2+"‘ class=‘selfBt selfBtDouble‘>"+_this.opts.selfNo+"<\/div><\/div>";
74 this.createMask(html);
75 this.selfEvents();
76 },
77
78 selfMobileTalk:function(){
79 var _this = this;
80 var html="<div id=‘selfWinsow‘ style=‘width:100%;margin:0px;top:0;left:0;padding:0; background:none;border:none;font-size:16px‘><h2 style=‘text-align:center; background:#fff‘ id=‘slefTitle‘><span id=‘selfNo‘ style=‘background:#fff;cursor: pointer;‘ class=‘selftalkNo‘>"+_this.opts.selfNo+"<\/span>"+_this.opts.slefTitle+"<b id=‘selfOk‘ style=‘background:#fff;color:#ff0028;cursor: pointer;‘ class=‘selftalkOk‘>"+_this.opts.selfOk+"<\/b><\/h2><textarea style=‘width:90%; border:1px solid #ccc; font-size:14px; display:block; margin:10px auto; height:120px‘ id=‘selfTextarea‘ placeholder=‘请填写您的特殊要求‘><\/textarea><\/div>";
81 this.createMask(html);
82 var selfBack = document.getElementById("selfBack");
83 selfBack.style.backgroundColor="#eee";
84 this.selfEvents();
85 },
86
87 //事件处理
88 selfEvents:function(){
89 this.selfOk();
90 var selfNo = document.getElementById(‘selfNo‘);
91 selfNo && this.slefNo();
92 },
93
94 //确定按钮事件
95 selfOk:function(){
96 var _this = this;
97 var type = this.opts.types;
98 var bt=true;
99 var selfOk = document.getElementById("selfOk");
100 function selfOkFun(e){
101 var e = e || window.event;
102 var el = e.scrElement || e.target;
103 if (el.id == "selfOk" || el.tagName=="IMG") {
104 if(type == "alert"){
105 _this.selfRemoveBack();
106 }else if(type == "confirm" || type == "talk" || "confirm2"){
107 if(bt){
108 _this.opts.callback();
109 }else{
110 return false;
111 }
112 _this.selfRemoveBack();
113 bt=false;
114 }
115
116 }
117 }
118
119 document.removeEventListener(‘click‘,selfOkFun,false);
120 document.addEventListener(‘click‘,selfOkFun,false);
121
122 },
123 //创建背景遮罩
124 createMask:function(html){
125 var selfBack = document.getElementById("selfBack");
126
127 if(selfBack){
128 return false;
129 }else{
130 var selfBack=document.createElement(‘div‘);
131 selfBack.id = "selfBack";
132 selfBack.style.position = "fixed",
133 selfBack.style.top = "0",
134 selfBack.style.left = "0",
135 selfBack.style.right = "0",
136 selfBack.style.bottom = "0",
137 document.body.appendChild(selfBack);
138 selfBack.innerHTML = html;
139 this.slefClose();
140 }
141 },
142
143 //关闭按钮事件
144 slefClose:function(){
145 var _this = this;
146 document.addEventListener(‘click‘,function(e){
147 var e = e || window.event;
148 var el = e.scrElement || e.target;
149 if(el.id == "slefClose"){
150 if(_this.opts.callback){
151 _this.opts.callback = function(){};
152 _this.selfRemoveBack();
153 return;
154 }
155 _this.selfRemoveBack();
156 }
157
158 });
159 },
160
161 //拒绝或者否认按钮事件
162 slefNo:function(){
163 var _this = this;
164 document.addEventListener(‘click‘,function(e){
165 var e = e || window.event;
166 var el = e.scrElement || e.target;
167 if(el.id == "selfNo" ||el.tagName == "IMG"){
168 if(_this.opts.callback){
169 _this.opts.callback = function(){};
170 _this.selfRemoveBack();
171 return;
172 }
173 _this.selfRemoveBack();
174 }
175 })
176 },
177 //移除窗口功能
178 selfRemoveBack:function(){
179 try{
180 var selfBack = document.getElementById(‘selfBack‘)
181 document.body.removeChild(selfBack);
182 }catch(e){}
183 },
184
185 //参数配置功能函数
186 exetends:function(a,b){
187 for( var attr in b){
188 a[attr] = b[attr];
189 }
190 },
191
192 //参数配置以及重写
193 setting:function(settings){
194 this.exetends(this.opts,settings)
195 },
196 }
css样式：
1 *{padding: 0; margin: 0;}
2 html{
3 height: 100%;
4 }
5 body{
6 font-size: 16px; font-family: "Microsoft Yahei"; height: 100%;
7 }
8 h1,h2,h3{
9 font-weight: lighter;
10 }
11 a{
12 text-decoration: none;
13 }
14 #selfWinsow{
15 width: 80%; margin: 0 5%; background: #fff; position: fixed;top: 35%;border: 1px solid #ccc; padding: 0 2% 2% 2%;
16 }
17 #slefClose{
18 width: 25px; height: 25px; position: absolute;right: 1rem; top: 0.4rem; z-index: 9999; cursor: pointer;
19 }
20 #slefClose::after{
21 position: absolute; width: 30px; height: 30px; content: "×"; font-size: 2.5rem; line-height: 30px;
22 }
23 #selfWinsow h2{
24 font-size: 1rem; border-bottom: 1px solid #ccc; line-height: 100%; padding:1rem 0;
25 }
26 #selInfo{
27 font-size: 0.95rem; line-height: 2.1rem; padding: 0.5rem;
28 }
29 #selfBtBox{
30 padding: 1rem; margin: 0px auto; border: 1px solid #ccc; overflow: hidden;
31 }
32 .selfBt{
33 padding: 0.8rem 2%;background: #323434; color: #fff; float: left; line-height: 100%; text-align: center; cursor: pointer;
34 }
35 .selfBtDouble{
36 width: 46%;
37 }
38 .selfBtSingle{
39 color: #fff; width: 100%; padding: 0.8rem 0;
40 }
41 #selfOk{
42 background: #323434;
43 }
44 .selftalkNo{
45 float: left;position: relative;
46 top: -5px;
47 padding: 4px 10px;
48 display: inline-block;
49 margin-left: 5px;
50 color: #000
51 }
52 .selftalkOk{
53 float: right;
54 position: relative;
55 top: -5px;
56 display: inline-block;
57 margin-right: 5px;
58 padding: 4px 10px;
59 color: #fff
60 }
61 #selfNo,#linkTo2{
62 background: #eeeeee; color: #555555
63 }
64 #selfBack{
65 width: 100%; background: rgba(0,0,0,.6);
66 }
67 #selfInput{
68 display: block;
69 width: 100%; padding: 0.5rem 0; border: 1px solid #eee; border-radius: 3px; margin-bottom: 1rem; text-indent: 0.6rem
70 }
71 #selfInput:focus{
72 border: 1px solid #087690;
73 }
调用方式：
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <script type="text/javascript" src="jquery.js"></script>
7 <script type="text/javascript" src="SelfWindow.js"></script>
8 <script>
9 window.onload = function(){
10
11 document.getElementById(‘mee‘).onclick = function(){
12
13 var win = new SelfWinsow({
14 types : "confirm",
15 callback:function(){
16 var name = $("#me").val();
17 $.ajax({
18 url: "phpinfo.php",
19 data: {name:name},
20 success: function(data){
21 if(data=="1"){
22 var rrt = new SelfWinsow("知道了，谢谢哈美女")
23 }else{
24 var rrt = new SelfWinsow({
25 selfInfo:"我们是很得体很很得体的",
26 types:"confirm",
27 callback:function(){
28 $("#mee").val("好吧，我输了，我服了你了");
29 }
30 })
31 }
32 }
33 });
34 }
35
36 });
37
38
39 }
40
41 }
42 </script>
43 </head>
44 <body>
45 <input id="me" type="text" name="name" value="">
46 <input id="mee" type="button" value="你大爷的">
47 </body>
48 </html>
时间： 2024-10-10 12:38:38