ys_popup.css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
.ys-popup{
position
:
fixed
;
top
:
0
;
bottom
:
0
;
left
:
0
;
right
:
0
;
display
:
none
;
z-index
:
99999
;
background-color
: rgba(
0
,
0
,
0
,
0.4
);
}
.ys-popup .ys-popup-content{
position
:
absolute
;
left
:
30px
;
right
:
30px
;
top
:
50%
;
display
:
block
;
background-color
:
#fff
;
margin
:
auto
;
border-radius:
4px
;
}
|
ys_popup.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
(
function
($){
function
closePopup(target){
$(target).hide();
}
function
showPopup(target){
$(target).show();
$(target).css(
"visibility"
,
"hidden"
);
var
popupContentHeight = parseInt($(target).find(
".ys-popup-content"
).css(
"height"
));
$(target).find(
".ys-popup-content"
).css({
"margin-top"
:(-1)*popupContentHeight/2+
"px"
});
$(target).css(
"visibility"
,
"initial"
);
}
$(
"body"
).on(
"click"
,
".ys-popup"
,
function
(e){
e.stopPropagation();
e.preventDefault();
$(
this
).hide();
});
$(
"body"
).on(
"click"
,
".ys-popup .ys-popup-content"
,
function
(e){
e.stopPropagation();
e.preventDefault();
});
var
options = {
ysPopup:
function
(command) {
if
(command==
"show"
){
showPopup(
this
);
}
else
if
(command==
"hide"
){
closePopup(
this
);
}
else
{
showPopup(
this
);
}
}
};
$.fn.extend(options);
})(jQuery);
|
测试
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<
div
class
=
"ys-popup remark-popup"
>
<
div
class
=
"ys-popup-content"
>
<
div
class
=
"remark-popup-title"
>备注
<
div
class
=
"remark-popup-content"
><
textarea
placeholder
=
"请输入备注"
>
<
div
class
=
"remark-popup-btn-group clearfix"
>
<
a
class
=
"remark-popup-cancel"
>取消
<
a
class
=
"remark-popup-ok"
>确认
<
script
>
$(".ys-popup").ysPopup("show");// 显示弹出框
$(".ys-popup").ysPopup("hide");// 隐藏弹出框
|