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


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

你可能感兴趣的:(css使用之leanModal)