标签:
这个东西其实很简单,将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