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

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.

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.

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/

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.

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/

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!

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?

$('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 .

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

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:

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.

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)

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?

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?

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?