Avgrund is jQuery plugin with new modal concept for popups

Overview

Avgrund

Libscore Badge

Avgrund is a jQuery plugin for your modal boxes and popups. It uses new concept showing depth between popup and page.

It works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations.

Tested with jQuery versions 1.4+

File size of minified version is ~1Kb.

Usage

You can simply include javascript file and init Avgrund with one line:

$('element').avgrund();

and linking avgrund.css file to the project:

<link rel="stylesheet" href="path/to/your/avgrund.css">

If you use bower then you can simply install it as:

bower install jquery.avgrund

Using plugin with 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')($);

Options

You're also able to use some of the options that let you customize it as you wish:

$('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')
});

More detailed information on every option you can find here.

Documentation

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')
});

Demo

Check the example here: http://labs.voronianski.dev/jquery.avgrund.js/

Inspired by Hakim's demo: https://github.com/hakimel/avgrund/

Changelog

Update (Sep 28, 2013)

Added AMD and CommonJS styles support.

Update (Sep 22, 2013)

Added support jQuery selectors in template option.

Update (June 15, 2013)

Better fix for overlay and long content pages, minor add-ons.

Update (May 26, 2013)

Few fixes, and plugin is available as bower package now. So you can simply install it as:

Update (Feb 25, 2013)

A bunch of small but very useful fixes and updates, including multiple avgrund popins on a page, removing popins from DOM after deactivation (also fixed an issue to make sure avgrund close effect works) and position:fixed/transform/overflow issue for scrolled pages in -webkit.

Update (Nov 18, 2012)

Get 2 new useful options for popin that were missed before. Now you can set your custom functions before Avgrund dialog is open and after it was closed.

Update (Sep 30, 2012)

Some new updates include initializing popin without event. Also now you can set up your own event for an element. Added ability to use a custom function inside avgrund's template option. Thanks to juice49 for pull request.

Update (Aug 31, 2012)

New options added - disable closing popup by 'Esc' and 'Document click'. Blur css filter for browsers that support it (seems only webkit ones for now).

Contribution

We still have some issues to fix and make avgrund better, if you have any suggestions raise them in issues please.


MIT Licensed

enjoy!

Bitdeli Badge

Comments
  • background overlay not correct on scrolled page

    background overlay not correct on scrolled page

    If the page is scrolled a bit and modal box is opened, the background overlay doesn't cover the complete page.

    Screenshot here: http://i.imgur.com/Gh1Vd.png

    opened by chinchang 15
  • Dynamic created Modal contents should be removed after closeing the Modal window

    Dynamic created Modal contents should be removed after closeing the Modal window

    I have many links on a page, click on one link would pop up one Modal window with the link details in it.

    After many clicks on different links, I would have many divs as follows:

    <div class="avgrund-overlay "></div>
    <div class="avgrund-popin ">link1....</div>
    <div class="avgrund-overlay "></div>
    <div class="avgrund-popin ">link2....</div>
    ....
    

    The Close action doesn't remove that dynamic created Modal contents.

    So I have to use the onUnload function to remove them after close the Modal window.

    I checked the Demo, it doesn't have such a problem, but the Modal content is already there, so it's different from my problem.

    I also tried to bind the avgrund method to as many elements as I can, the results were same.

    So is it a problem for dynamic created Modal contents?

    Thanks.

    opened by chenxsan 6
  • Ajax support for avgrund.

    Ajax support for avgrund.

    I have named certain ids. I click on them and the popin is displayed with the information from server through Ajax [I'm sending the id-name that was clicked and that particular id is matched and the results are fetched]. However, I have to double click in order to get the popin displayed.

    opened by prateeksachan 6
  • Select2 doesn't work with Avgrund popin

    Select2 doesn't work with Avgrund popin

    Hello, I'm trying to implement select2 into an Avgrund popin but nothing happens when clicking on the select element... I've tried it out of the popin, it perfectly works. I have no console error... Does anyone know the problem ? Thanks in advance, Lo

    Edit : here is a fiddle http://jsfiddle.net/QgWa2/17/

    opened by lofromfar 5
  • Enhanced to support JQuery references in 'template' parameter

    Enhanced to support JQuery references in 'template' parameter

    hei, I wanted a way to use dialogues I keep laid out on the page with your very cool plugin, so I made a small tweak and changed the examples and documentation too. Please integrate when you have a chance or let me know if there's anything I should change.

    opened by ekkis 5
  • Add other jQuery events inside avgrund

    Add other jQuery events inside avgrund

    I was trying to include jQuery 'tabs' in the avgrund-modal. But was having difficulty as to where can I trigger the function. My javascript code is here: http://dpaste.com/876556/

    opened by prateeksachan 4
  • CSS3 transition issues in IE and Firefox

    CSS3 transition issues in IE and Firefox

    Hello, and first of all: great plugin!

    I'd wanted to ask you if you know a fix for two CSS related problems I encountered using avgrund though:

    • IE9 won't apply the body.avgrund-active {-ms-transform: scale(0.9);} to children elements that use fixed positioning (they will stay fixed as in FIXED). All other browser will apply this correctly. Is there a way to work around this?
    • Firefox (v13 - [EDIT: just updated to v15 and it's still the same]) will somehow ruin the "depth-like"-effect as the popin will be scaled back (just like the background) instead of scaled up (like in all other browsers), therefore losing the illusion of z-movement. This is also visible in your demo page. I guess this might be caused by FF ignoring the preceding transform rules whereas other browser will add them up (I ain't no CSS3 wizard, so this is just an assumption)?

    If you have any tip or fix for that I'd be super-thankful.

    In any case: thank you!

    opened by m90 4
  • ajax support for template

    ajax support for template

    I would like to use this plugin for my modal windows through my application, but would require getting the information from the server first, is there a way you can incorporate ajax templates?

    opened by ghost 4
  • template class content doesn't work.

    template class content doesn't work.

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

    When I click element i set , It pop up but nothing in there.

    and I remove style="display:none;" , it works but The default page will show the content .

    opened by kurodz 3
  • Dynamic content fails to load

    Dynamic content fails to load

    template = typeof options.template === 'function' ?
    options.template(self) : options.template;
    

    ...instead of...

    template = typeof options.template === 'function' ?
    options.template(self) :
    options.template instanceof jQuery ?
    options.template.html() :
    options.template;
    

    ...and also...

    var div = $('<div class="avgrund-popin ' + options.holderClass + '"></div>');
    div.append(template);
     body.append(div);
    

    ...instead of...

    body.append('<div class="avgrund-popin ' + options.holderClass + '">'
    + template + '</div>');
    
    opened by DunhamGitHub 3
  • Jquery ignores if-else condition

    Jquery ignores if-else condition

    Hi,

    I really loved your plugin but m facing an issue while imposing an if-else block on a dropdownlist selection. I wish the plugin to appear only if the selected value in my dropdown list is "test". Kindly help.

    Below is my code:

    opened by goelseema11 3
  • Center pop-up in window #41

    Center pop-up in window #41

    I managed to fix #41 additionally, it is inconvenient that couldn't use with Parallax Scrolling page, because $(window).scrollTop always returns 0.

    because this issue caused by the option html, body{ height: 100%} I try not to use it. and i added an option to show pop-up in the center.

    opened by itoufo 1
  • Need to delete modal & set template after init

    Need to delete modal & set template after init

    Hi!

    I am in desperate need to remove the link from the object. Sometimes i have to reload the modal several times on a website (when adding new divs which should trigger a modal window) and it then causes some stacked unload events.

    So after i do this; $('.class').avgrund({ //init code}); i'd love to be able to delete the modal $('.class').avgrund({ //init code}).remove() or something.

    There isn't anything about this in the documentation.

    Furthermore i really need to be able to edit the template after initialization. Although it's not as urgent since there are ways around this (a reload of the modal with a function call in template for example)

    opened by johan-lejdung 1
  • Init on contact form validation?

    Init on contact form validation?

    I am using avgrund for when my contact form is submitted. Right now it's set to display when the submit button is clicked, but I want it to init ONLY if the form is validated (if the required fields have been filled out).

    I've tried two a few ways so far to no avail:

    $('#submit').avgrund({setEvent: 'submit'}); $('#submit').avgrund({onLoad: function{$('#submit').hasclass('valid')}}); wrapping the avgrund function in the conditional statement if $('#submit').hasclass('valid') Any suggestions?

    opened by rmiller61 1
  • Popin box not showing

    Popin box not showing

    I'm not sure what's wrong but when I click the button to fire the event it brings up the overlay, but the popin box is nowhere to be found. It's not showing in the source code either. Is there something you have to do to initialize to popin box that I'm missing?

    opened by mikeLspohn 0
  • show popup above element that triggered it

    show popup above element that triggered it

    When I click on a button that loads the dialog it shows it, but at a certain position from the top of the the page, NOT above the position of the dialog button. And when the popup is closed it goes to the beginning of the page instead back to the position where it was triggered. Is there a way to fix this?

    opened by jasperf 0
Owner
Dmitri Voronianski
*.js,*.lua,*.swift
Dmitri Voronianski
Elegant, responsive, flexible and lightweight modal plugin with jQuery.

iziModal Elegant, responsive, flexible and lightweight modal plugin with jQuery. izimodal.marcelodolza.com Fast Responsive Animated Lightweight Custom

Marcelo Dolza 2.1k Nov 9, 2022
The simplest possible modal for jQuery

A simple & lightweight method of displaying modal windows with jQuery. For quick examples and demos, head to jquerymodal.com. Why another modal plugin

Kyle Fox 2.5k Nov 25, 2022
Extends the default Bootstrap Modal class. Responsive, stackable, ajax and more.

Note: Since this plugin was created to solve a lot of the issues with BS2, it still uses the BS2 markup syntax. Currently I believe the default BS3 mo

Jordan Schroter 5k Nov 18, 2022
A modal built with pure CSS, enhanced with JavaScript

CSS Modals Modals built out of pure CSS Please visit the website to read more about this project and refer to the FAQ in case of a question. What is i

Hans Christian Reinl 1.8k Nov 17, 2022
Simple to use modal / alert / dialog / popup. Created with vanilla JS. No javascript knowledge required! Works on every browser and device! IE9

EinsModal The last modal / alert / dialog you will ever need! Full Documentation: https://www.einscms.com/modal EinsModal is the best solution to inte

EinsCMS 30 Oct 20, 2022
A simple vanilla and lightweight modal which is easy to expand

A simple vanilla and lightweight modal which is easy to expand

null 1 Jul 3, 2022
Toggle the state of a UI element to easily create components e.g. collapse, accordion, tabs, dropdown, dialog/modal.

Tiny UI Toggle Toggle the state of a UI element to easily create components e.g. collapse, accordion, tabs, dropdown, dialog/modal. Demo and documenta

Nigel O Toole 77 Nov 10, 2022
A light-weight, customizable lightbox plugin for jQuery

About Colorbox: A customizable lightbox plugin for jQuery. See the project page for documentation and a demonstration, and the FAQ for solutions and e

Jack Moore 4.8k Nov 20, 2022
A Lightweight Responsive jQuery Tooltip Plugin

tipso A Lightweight Responsive jQuery Tooltip Plugin There is also a Wordpress version of this plugin. Get it here Getting started Include jQuery <scr

Bojan Petkovski 324 Jun 5, 2022
jQuery PopBox UI Element

jQuery PopBox jQuery PopBox is a simple balloon UI element inspired by 37Signals Highrise CRM. See it in action here: http://gristmill.github.com/jque

Gristmill 427 Sep 24, 2022
jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.

fancyBox jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable. See the project page for doc

Jānis Skarnelis 7.2k Nov 19, 2022
A touchable jQuery lightbox

Swipebox A touchable jQuery lightbox. View project page What is Swipebox ? Swipebox is a jQuery "lightbox" plugin for desktop, mobile and tablet. Feat

null 2k Nov 16, 2022
A customizable, modular, responsive, lightbox gallery plugin.

lightGallery A customizable, modular, responsive, lightbox gallery plugin for jQuery. Demo JQuery lightGallery demo. Codepen demo Main features Fully

Sachin N 5.5k Nov 24, 2022
🦉The jQuery plugin "Stick to me" allows you to create exit-popups on your web page, so you can capture visitors just as they are about to leave.

?? The jQuery plugin "Stick to me" allows you to create exit-popups on your web page, so you can capture visitors just as they are about to leave. How

Guilherme Assemany 18 Feb 10, 2022
True P2P concept for your p2p powered website/app/client. MSC/MEP (Multiple Strategy Concept/Multiple Entry Points)

TRUE P2P CONCEPT - Lets redecentralize the web This repo is just conceptual. Active development of the endproduct (TRUE P2P) happens here https://gith

Bo 6 Mar 29, 2022
Lightweight vanilla js modal component (just 2kb) , pure javascript Modal

Lightweight vanilla js modal component (just 2kb) pure javascript Modal , This is just 2kb Lightweight vanilla js modal component with zero dependenci

Salah Eddine Lalami 11 Sep 24, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 13 Jul 1, 2022
This simple library allows you to create awesome responsive and highly customizable popups importing just one JavaScript file.

Creativa - Popup This is a simple library that allows you to create awesome popups importing just one JavaScript file. Getting started You can import

Eduardo Mollo 5 Mar 29, 2022