Skip to content

Commit 3f61b8c

Browse files
materialcodermaterialcoder
committed
task6
1 parent f570a5b commit 3f61b8c

File tree

2 files changed

+47
-2
lines changed

2 files changed

+47
-2
lines changed

‎Practice/task6/css/base.css

+20-1
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,31 @@ html,body {
1111

1212
.container a {
1313
display: block;
14+
width: 100px;
1415
height: 30px;
1516
line-height: 30px;
1617
margin: 0 auto;
17-
text-align: right;
18+
text-align: center;
1819
text-decoration: none;
1920
font-size: 24px;
2021
color: #fff;
2122
padding: 20px;
23+
}
24+
25+
.container .readme{
26+
width: 600px;
27+
height: auto;
28+
line-height: 1.5;
29+
background: #fff;
30+
padding: 10px;
31+
border: 2px solid #fff;
32+
border-radius: 4px;
33+
box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
34+
margin: 0 auto;
35+
}
36+
37+
.container .readme pre {
38+
font-family: Arial;
39+
font-size: 16px;
40+
color: #000;
2241
}

‎Practice/task6/index.html

+27-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,33 @@
2828
</head>
2929
<body>
3030
<div class="container">
31-
<a href="javascript:;" id="login">登录</a>
31+
<a href="javascript:;" id="login">点我</a>
32+
<div class="readme">
33+
<h3>说明：</h3>
34+
<p>1、该组件基于jQuery，使用时需要引入jQuery和组件中的layer.css，layer.js</p>
35+
<p>2、该组件默认为屏幕水平垂直居中，可支持自定义浮层位置、大小，标题、内容和按钮文字。使用方法为：</p>
36+
<pre>
37+
var layer = new Layer();
38+
layer.alertMsg({
39+
width: 400,
40+
height: 300,
41+
title: "提示",
42+
content: "这是一个大的浮层",
43+
btn: ['确认','取消'],
44+
top: 100,
45+
left: 100
46+
});
47+
</pre>
48+
<p>3、默认支持拖拽窗口title部分移动浮出窗口位置，可通过设置 isDragable:false 取消</p>
49+
<p>4、默认点击浮出层以外部分关闭浮出层</p>
50+
<p>5、支持传入点击确认或取消按钮后的执行函数，方法为：</p>
51+
<pre>
52+
layer.alertMsg({
53+
yes: function() { },
54+
no: function() { }
55+
});
56+
</pre>
57+
</div>
3258
</div>
3359
</body>
3460
</html>

0 commit comments

Comments
 (0)