标签:
这个东西其实很简单,将bottom设auto,便可在设置top的值,那么具体的应用是什么?
例子如下
css代码:
* {
margin: 0; padding: 0;
}
.fixed {
z-index: 9; position: fixed; left: 50%; margin-left: -320px; bottom: 0; width: 640px; padding: 30px; background: #fff; border: 1px solid #ddd; border-left:none; border-right: none;
}
.txt {
line-height: 50px; width: 100%; text-indent: 10px;
}
.gb-mask {
display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.2);
}
html代码
<div style="width: 640px; margin: 0 auto;"> <div class="fixed"> <input type="text" class="txt" placeholder="输入"/> </div> </div> <div class="gb-mask"></div>
jq代码
<script>
$(function(){
$(‘.txt‘).focus(function(){
$(‘.fixed‘).css({
‘bottom‘:‘auto‘,
‘top‘:‘0‘
})
$(‘.gb-mask‘).fadeIn();
});
$(‘.gb-mask‘).click(function(){
$(‘.fixed‘).css({
‘bottom‘:‘0‘,
‘top‘:‘auto‘
})
$(‘.gb-mask‘).fadeOut();
});
});
</script>
效果如图:

标签:
原文地址:http://www.cnblogs.com/liangcheng11/p/5484681.html