Skip to content

Commit d79fcd9

Browse files
zhangyan1991zhangyan1991
committed
模态弹窗
1 parent f98e917 commit d79fcd9

File tree

8 files changed

+289
-0
lines changed

8 files changed

+289
-0
lines changed

‎10.1 模态/css/base.css

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
2+
form,fieldset,input,textarea,p,blockquote,th,td {
3+
padding: 0;
4+
margin: 0;
5+
}
6+
table {
7+
border-collapse: collapse;
8+
border-spacing: 0;
9+
}
10+
fieldset,img {
11+
border: 0;
12+
}
13+
address,caption,cite,code,dfn,em,strong,th,var {
14+
font-weight: normal;
15+
font-style: normal;
16+
}
17+
ol,ul {
18+
list-style: none;
19+
}
20+
caption,th {
21+
text-align: left;
22+
}
23+
h1,h2,h3,h4,h5,h6 {
24+
font-weight: normal;
25+
font-size: 100%;
26+
}
27+
q:before,q:after {
28+
content:'';
29+
}
30+
abbr,acronym { border: 0;
31+
}
32+
html body{
33+
height: 100%;
34+
}

‎10.1 模态/css/window.css

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
.btn{
2+
text-decoration: none;
3+
padding:5px 10px;
4+
width: 50px;
5+
text-align: center;
6+
display: block;
7+
margin: 100px;
8+
background: #ddd;
9+
}
10+
11+
.window_boundingBox{
12+
position: fixed;
13+
border: 1px solid #ddd;
14+
width: 500px;
15+
height: 300px;
16+
left: 50%;
17+
margin-left: -250px;
18+
top:100px;
19+
box-shadow: 0 0 12px #888;
20+
background: #fff;
21+
}
22+
23+
.window_mask{
24+
width: 100%;
25+
height: 100%;
26+
background: #000;
27+
opacity: .3;
28+
position: absolute;
29+
left: 0;
30+
top: 0;
31+
}
32+
33+
.window_alertBtn{
34+
width: 100px;
35+
position: absolute;
36+
bottom: 10px;
37+
left: 50%;
38+
margin-left: -50px;
39+
}
40+
41+
.window_header{
42+
background: #999;
43+
color: #fff;
44+
text-align: center;
45+
padding: 5px;
46+
font-size: 20px;
47+
}
48+
49+
.window_body{
50+
padding: 10px;
51+
}
52+
53+
.window_closeBtn{
54+
position: absolute;
55+
right: 0;
56+
top: 0;
57+
font-size: 20px;
58+
color: #fff;
59+
background: red;
60+
cursor: pointer;
61+
padding: 5px;
62+
}
63+
64+
/*skin for window_skin_a*/
65+
.window_skin_a.window_boudingBox{
66+
box-shadow: none;
67+
border: 5px solid #ddc;
68+
border-radius: 5px;
69+
}
70+
71+
.window_skin_a .window_alertBtn{
72+
width: 50px;
73+
left: auto;
74+
right: 20px;
75+
margin-left: 0;
76+
background:red;
77+
border: none;
78+
color: #fff;
79+
padding: 10px;
80+
}
81+
82+
.window_skin_a .window_header{
83+
background: red;
84+
text-align: left;
85+
padding: 10px;
86+
font-weight: bold;
87+
}
88+
89+
.window_skin_a .window_closeBtn{
90+
width: 45px;
91+
height: 45px;
92+
border-radius: 45px;
93+
line-height: 45px;
94+
padding: 0;
95+
text-align: center;
96+
background: blue;
97+
font-size: 24px;
98+
font-weight: bold;
99+
right: -15px;
100+
top: -15px;
101+
}

‎10.1 模态/index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>模态窗口</title>
6+
<link type="text/css" rel="stylesheet" href="css/base.css">
7+
<link type="text/css" rel="stylesheet" href="css/window.css">
8+
</head>
9+
10+
<body>
11+
<a href="#" class="btn">弹窗</a>
12+
<script type="text/javascript" data-main="js/main" src="js/require.js"></script>
13+
</body>
14+
</html>

‎10.1 模态/js/jquery-2.1.1.min.js

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎10.1 模态/js/main.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
require.config({
2+
paths:{
3+
jquery:'jquery-2.1.1.min'
4+
}
5+
});
6+
7+
require(['jquery','window'],function($,w){
8+
$('.btn').click(function(){
9+
new w.Window().alert({
10+
title:'提示',
11+
content:'Welcome!!!',
12+
handler:function(){
13+
alert('you click the button');
14+
},
15+
width:300,
16+
height:150,
17+
y:250,
18+
x:600,
19+
hasCloseBtn:true,
20+
text4AlertBtn:'OK',
21+
skinClassName:'window_skin_a',
22+
handler4AlertBtn:function(){
23+
alert('你点击了确定按钮');
24+
},
25+
handler4CloseBtn:function(){
26+
alert('你点击了关闭按钮');
27+
}
28+
});
29+
});
30+
});

‎10.1 模态/js/require.js

Lines changed: 36 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎10.1 模态/js/window.js

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
define(['jquery'],function($){
2+
function Window(){
3+
this.cfg = {
4+
width:500,
5+
height:300,
6+
title:'系统消息',
7+
content:"",
8+
hasCloseBtn:false,
9+
hanMask:true,
10+
skinClassName:null,
11+
text4AlertBtn:'确定',
12+
handler4AlertBtn:null,
13+
handler4CloseBtn:null
14+
};
15+
}
16+
17+
Window.prototype = {
18+
alert:function(cfg){
19+
var CFG = $.extend(this.cfg,cfg),
20+
boudingBox = $(
21+
'<div class="window_boundingBox">'+
22+
'<div class="window_header">'+CFG.title+'</div>'+
23+
'<div class="window_body">'+CFG.content+'</div>'+
24+
'<div class="window_footer"><input type="button" class="window_alertBtn" value="'+CFG.text4AlertBtn+'"></div>'+
25+
'</div>'
26+
),
27+
btn = boudingBox.find('.window_alertBtn'),
28+
mask = null;
29+
/*处理模态*/
30+
if (CFG.hanMask) {
31+
mask = $('<div class="window_mask"></div>');
32+
mask.appendTo("body");
33+
};
34+
35+
boudingBox.appendTo('body');
36+
btn.click(function(){
37+
CFG.handler4AlertBtn && CFG.handler4AlertBtn(); //弹出窗口的确定按钮处理函数
38+
boudingBox.remove();
39+
mask&&mask.remove();
40+
});
41+
$.extend(this.cfg,cfg);
42+
boudingBox.css({
43+
width:CFG.width+'px',
44+
height:CFG.height+'px',
45+
left:(CFG.x||(window.innerWidth-CFG.width)/2)+'px',
46+
top:(CFG.y||(window.innerHeight-CFG.height)/2)+'px'
47+
});
48+
if(CFG.hasCloseBtn){
49+
var closeBtn = $('<span class="window_closeBtn">X</span>');
50+
closeBtn.appendTo(boudingBox);
51+
closeBtn.click(function(){
52+
CFG.handler4CloseBtn&&CFG.handler4CloseBtn(); //弹出窗口的关闭按钮处理函数
53+
boudingBox.remove();
54+
mask&&mask.remove();
55+
});
56+
}
57+
if (CFG.skinClassName) {
58+
boudingBox.addClass(CFG.skinClassName);
59+
};
60+
61+
},
62+
confirm:function(){},
63+
prompt:function(){}
64+
}
65+
66+
return{
67+
Window : Window
68+
}
69+
})

0 commit comments

Comments
 (0)