jquery制作居中遮罩层效果分享
jquery制作居中遮罩层效果分享
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:遮罩演练++++确定取消$(document).ready(function(){$('.fun').on('click'...

复制代码 代码如下:

<!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>

<ul>

<li>

<span>++++</span>

</li>

</ul>

</div>

<div>

</div>

<div>

<div id="content-container-templet">

<ul>

<li><input type="text" placeholder="请输入标题"/></li>

<li><button>确定</button></li>

<li><button>取消</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%;

}

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类