多语言展示
当前在线:888今日阅读:113今日分享:31

Avgrund弹出层插件使用攻略

Avgrund是一款效果不错的弹出层插件,层弹出的同时页面模糊并后退,弹出的层支持按ESC关闭和点击背景关闭,只需简单地在页面中引入Avgrund相关文件就可以使用了。       本经验分享该插件使用方法。
工具/原料
1

笔记本电脑或是台式机

2

互联网

3

Avgrund

方法/步骤
1

首先引入相关文件:Avgrund.js和Avgrund.css

2

给指定层加上类:avgrund-popup(这是弹出的层必须要有的Class)

3

弹出层:Avgrund.show('#elementID');

4

关闭层:Avgrund.hide();

5

案例HTML完整代码:Avgrund - A modal UI concept

Avgrund

A modal concept which aims to give a sense of depth between the page and modal layers. Click the button below to give it a try.

Uses CSS transforms to scale components and CSS filters to blur the page. Built for the fun ofit, not intended for any practical use.

         

Avgrund is Swedish for abyss.

6

运行案例,打开弹出层效果如下图所示:

7

运行案例,关闭弹出层后效果如下图所示:

8

浏览器支持情况,如下图所示:

注意事项

本插件无需依赖JQuery库

推荐信息