jquery制作居中遮罩层效果分享
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery制作居中遮罩层效果分享相关的知识，希望对你有一定的参考价值。
参考技术A 这篇文章主要介绍了jquery制作居中遮罩层效果示例,需要的朋友可以参考下代码如下:
<!DOCTYPE
html>
<html
lang=zh-cn>
<head>
<meta
charset=utf-8>
<title>遮罩演练</title>
<link
href="../css/component2.css"
rel="Stylesheet"/>
<script
src="../js/jquery-1.11.0.min.js"></script>
<script
src="../js/shadow.js"></script>
</head>
<body>
<div
class="left-container
layout-container">
<ul
class="topic-title">
<li>
<span
class="fun">++++</span>
</li>
</ul>
</div>
<div
class="right-container
layout-container">
</div>
<div
style="display:none">
<div
class="topic-input-div"
id="content-container-templet">
<ul
class="topic-input-ul">
<li
class="input-li"><input
type="text"
style="width:
100%;line-height:
2em"
placeholder="请输入标题"/></li>
<li
class="btn-li"><button
class="sure">确定</button></li>
<li
class="btn-li"><button
class="cancel">取消</button></li>
</ul>
</div>
</div>
</body>
<script
type="text/javascript">
$(document).ready(function()
$('.fun').on('click',function()
console.log('fun
click');
showAddTopic(function(val)
console.log(val);
);
);
);
</script>
</html>
shadow.js
代码如下:
shadow_list=[];
function
showAddTopic(cb)
var
input_container=$('#content-container-templet').clone();
input_container.removeAttr('id');
var
shadow=$('<div
/>').addClass('shadow-wrapper').append(input_container);
shadow.appendTo(document.body);
shadow_list.push(shadow);
$('.sure',shadow).on('click',function()
var
val=$('.input-li
input',shadow).val();
cb(val);
hideAddTopic();
);
$('.cancel',shadow).on('click',function()
hideAddTopic();
);
function
hideAddTopic()
if(shadow_list.length>0)
var
shadow=shadow_list.pop();
shadow.remove();
component2.css
代码如下:
html,body
padding:0px;
margin:
0px;
width:
100%;
height:
100%;
overflow:hidden;
ul,li
padding:0px;
margin:
0px;
list-style:none;
input,textarea
vertical-align:middle;
border:none;
.layout-container
position:absolute;
top:0px;
height:100%;
overflow:auto;
.left-container
left:
0px;
width:20%;
border:solid
5px
#52BE7F;
.right-container
right:0px;
width:80%;
.shadow-wrapper
position:
absolute;
width:100%;
height:
100%;
.topic-title
li
span
height:30px;
line-height:30px;
vertical-align:middle;
.topic-title
.fun
float:right;
.topic-input-div
position:
absolute;
left:
50%;
top:50%;
height:200px;
width:
400px;
margin-top:-120px
;
margin-left:-210px;
padding:20px
10px;
.topic-input-ul
vertical-align:
middle;
position:absolute;
width:380px;
height:2em;
left:
50%;
top:50%;
margin-top:
-1em;
margin-left:
-190px;
.topic-input-ul
li
line-height:
2em;
display:inline-block;
*display:inline;
.topic-input-ul
.input-li
width:40%;
.topic-input-ul
.btn-li
width:
15%;
jQuery10种不同动画效果的响应式全屏遮罩层
遮罩层有很多今天介绍这个jQuery10种不同动画效果的响应式全屏遮罩层
实例代码
|
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
|
<div class="container"> <header class="sucaihuo-header"> <h1>全屏遮罩效果</h1> <nav class="sucaihuo-demos"> <a class="current-demo" href="index.html">Huge Inc</a> <a href="index2.html">Corner</a> <a href="index3.html">Slide down</a> <a href="index5.html">Scale</a> <a href="index6.html">Door</a> <a href="index7.html">Content Push</a><br/> <a href="index8.html">Content Scale</a> <a href="index9.html">Corner Shape</a> <a href="index10.html">Little Boxes</a> <a href="index11.html">Simple Genie</a> <a href="index12.html">Genie</a> </nav> </header> <section> <p>Overlay fades in and menu rotates slightly in perspective. As seen on <a href="http://hugeinc.com">Huge</a></p> <p><button id="trigger-overlay" type="button">Open Overlay</button></p> </section> </div><!-- /container --> <!-- open/close --> <div class="overlay overlay-hugeinc"> <button type="button" class="overlay-close">Close</button> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">Html5</a></li> <li><a href="#">Css3</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </div> <script src="js/classie.js"></script> <script src="js/demo1.js"></script>转载：http://www.cnblogs.com/niuboren/p/6116211.html
|
以上是关于jquery制作居中遮罩层效果分享的主要内容，如果未能解决你的问题，请参考以下文章