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

发布于 2019-08-07 字数 6566 浏览 922 评论 0

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

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

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="http://cdn.uedsc.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>



通过 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):

    require : ['jquery-browserify', 'jquery.avgrund']

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

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



    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:

    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:

    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:

    openOnEvent: false

setEvent – string, default: ‘click’

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

    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:

    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:

    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:

    template: '<p>This is popin content!</p>'

or function that returns content itself:

    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!

and use it in template of popin:

    template: $('.content')


如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。