css使用之leanModal

LeanModal是一个用于创建模式对话框的超级简单JQuery插件。

1.作用：可以展示隐藏的页面内容，整个插件大小只有780bytes，可灵活变化高度和宽度，没有用到任何图片，支持在一个页面中创建多个实例，非常适合于创建：登录框，注册框，警告对话框等。

2.使用方法：

<h2>
<a class="LinkBtn fr" rel="leanModal" name="signup" href="#chooseType">添加资讯</a> 
</h2>

<script>
$(function() {
    $('a[rel*=leanModal]').leanModal({ top : 200 });
});

</script>

<div id="chooseType" style="display:none">
<div id="chooseType-ct">
<div id="chooseType-header">
<h2>选择一个文章的类型</h2>
</div>
<div style="padding:20px 10px;">
<a style="margin:10px;" class="btn" href="">
<span>普通资讯文章</span>
</a>
<a style="margin:10px;" class="btn" href="">
<span>课程视频文章</span>
</a>
<a style="margin:10px;" class="btn" href="">
<span>图片墙文章</span>
</a>
</div>
</div>
</div>

3.效果：

点击屏幕后，选框自动消失