jQuery.Avgrund.js 基于 jQuery 模态弹窗的插件

Question

jQuery.Avgrund.js 是一个 jQuery 用来显示模态弹窗的插件，支持包括 IE6 在内的流行浏览器，要求 jQuery 1.4+ ，轻量级的弹窗插件文件很小，压缩版本只有 1kb，插件提供了大量的方法方便开发者配置插件。

jQuery.Avgrund.js 是你模态框和弹出的jQuery插件。它采用新概念显示弹出页面之间的深度，它在所有的现代浏览器的作品和优雅的降低在那些不支持 CSS 转换和转换。

• 依赖 jQuery 1.4 及以上的版本
• 轻量级的弹窗插件，压缩版本只有 1KB 文件大小。

简单使用方法

你可以通过 jQuery.Avgrund.js 插件的Github地址：https://github.com/voronianski/jquery.avgrund.js 下载得到 jQuery.Avgrund.js 的源文件，然后将插件文件引入到你的网页中。

<script src="https://libs.wenjiangs.com/jquery/2.1.3/jquery.min.js"></script>
<script src="jquery.avgrund.js"></script>
<link rel="stylesheet" href="css/avgrund.css">

编写一个按钮，用于触发模态弹窗

<a href="#" id="show">Show it</a>

最后初始化插件

$('#show').avgrund();

通过 Browserify 使用插件

At first install plugin via NPM:

npm install jquery.avgrund
npm install jquery-browserify

In your server-side node.js (e.g. express app):

app.use(require('browserify')({
    require : ['jquery-browserify', 'jquery.avgrund']
}));

And in your browser-side you can init plugin now:

var $ = require('jquery-browserify');
require('jquery.avgrund')($);

可选参数

您还可以使用一些让您自定义它的选项，如您所希望的那样：

$('element').avgrund({
    width: 380, // max is 640px
    height: 280, // max is 350px
    showClose: false, // switch to 'true' for enabling close button
    showCloseText: '', // type your text for close button
    closeByEscape: true, // enables closing popup by 'Esc'..
    closeByDocument: true, // ..and by clicking document itself
    holderClass: '', // lets you name custom class for popin holder..
    overlayClass: '', // ..and overlay block
    enableStackAnimation: false, // enables different type of popin's animation
    onBlurContainer: '', // enables blur filter for specified block
    openOnEvent: true, // set to 'false' to init on load
    setEvent: 'click', // use your event like 'mouseover', 'touchmove', etc.
    onLoad: function (elem) { ... }, // set custom call before popin is inited..
    onUnload: function (elem) { ... }, // ..and after it was closed
    template: 'Your string content goes here..' // or function (elem) { ... }, or selector $('.content')
});

更详细的信息，你可以在下面找到找到每一个选项详细介绍。

Here is the list of available avgrund options:

width - string | number, default: '380px'

Set popup width (currently stict to max 640px).

height - string | number, default: '280px'

Set popup height (currently strict to max 350px).

showClose - boolean, default: false

Show/hide close button.

showCloseText - string

If you decided to show close button then you probably want to add close text to it.

closeByEscape - boolean, default: true

Allow users to close popup by clicking Esc button.

closeByDocument - boolean, default: true

Allow users to close popup by clicking everywhere on document (except popup of course).

holderClass - string

Adds custom css classes to avgrund popup, example:

$(element).avgrund({
    holderClass: 'my-custom-class'
});

results in adding this class to avgrund container:

<div class="avgrund-popin my-custom-class">...</div>

overlayClass - string

Adds custom css classes to avgrund overlay container.

enableStackAnimation - boolean, default: false

Possibility to add a bit different popup hiding animation type.

onBlurContainer - string

Class name for container element that will be blurred when popup appears, example:

$(element).avgrund({
    onBlurContainer: '#my-container'
});

Please note that currently css blur is not supported in all modern browsers.

openOnEvent - boolean, default: true

If you want to show avgrund on page load set this option value to false, example:

$(document).avgrund({
    openOnEvent: false
});

setEvent - string, default: 'click'

With this option you can manage events that will open popup on certain element:

$(element).avgrund({
    setEvent: 'mouseover' // will open popin on element's mouseover
});

onLoad - function

If you need to make some preparations or whatever before avgrund popup will be shown, example:

$(element).avgrund({
    onLoad: function (element) {
        console.log('This function will be called before dialog is initialized');
    }
});

onUnload - function

This function will be executed after popup was closed, example:

$(element).avgrund({
    onUnload: function (element) {
        console.log('This message will be shown after dialog is closed');
    }
});

template - string | function | jQuery object

Specify your content for popin here, it can be string value:

$(element).avgrund({
    template: '<p>This is popin content!</p>'
});

or function that returns content itself:

$(element).avgrund({
    template: function (element) {
        // return 'your content..'
    }
});

Also it accepts jQuery objects (dynamic as well), so you can create element with content inside your app:

<div class="content" style="display: none;">
    My content for popin!
</div>

and use it in template of popin:

$('element').avgrund({
    template: $('.content')
});

相关链接

• Github地址：https://github.com/voronianski/jquery.avgrund.js
• 项目地址：http://labs.voronianski.com/jquery.avgrund.js/