网站示例
跟这种弹出效果一模一样用jquery怎么写,不依赖插件功能
我这animate
但弹出来的效果是整体向上,不像他这种是从盒子里弹出来的感觉!!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.data demo</title>
<style>
.popdiv{width:400px;height:30px;margin:200px auto;}
.popdiv a{width:30px;height:30px;background-color:red;display:inline-block;margin:0 10px;border-radius:3px;position:relative;text-indent:-22222222px;}
.popdiv div{position:absolute;top:0;left:0;opacity:0;height:150px;width:150px;border:1px solid #eee;-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset;-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;}
</style>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>
<div class="popdiv">
<a href="#">
点击1
<div>弹出1</div>
</a>
<a href="#">
点击2
<div>弹出2</div>
</a>
</div>
<script type="text/javascript">
$(function(){
var popdiv = $(".popdiv");
var _click = popdiv.find('a');
_click.on('click',function(){
var _div = $(this).find('div');
$('.popdiv').find('div').css({'opacity':'0','top':'0'})
_div.animate({
'opacity':1,
'top':'-160px'
})
})
})
</script>
</body>
</html>
https://github.com/aui/artDialog