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.效果：

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