Question 1

How do I change the size of an Avgrund modal?

Accepted Answer

Use the width and height options in the configuration, but note that maximum dimensions are 640px for width and 350px for height, as specified in the README. You can set these numerically or with strings like '380px'.

Question 2

Avgrund or Bootstrap modal: which is better?

Accepted Answer

Avgrund is lighter (~1KB) and offers a unique depth effect, ideal for jQuery sites needing minimal footprint. Bootstrap modals are more feature-rich with built-in styling and accessibility, but heavier; choose based on project needs and framework use.

Question 3

Is Avgrund modal accessible for screen readers?

Accepted Answer

The README does not address accessibility, so you may need to manually add ARIA attributes like aria-modal and role='dialog' for screen reader compatibility. This requires extra development effort compared to more accessible alternatives.

Question 4

How to load content dynamically in Avgrund?

Accepted Answer

Use the template option with a function or jQuery selector, as described in the README. For example, you can pass a function that returns content or select an existing DOM element to display in the popup.

Question 5

Can I use Avgrund with React or Vue?

Accepted Answer

It's possible but not ideal, as Avgrund is a jQuery plugin and may conflict with React's virtual DOM or Vue's reactivity. You might need workarounds or consider native modal solutions for these frameworks.

Question 6

Which browsers support the blur effect in Avgrund?

Accepted Answer

The onBlurContainer option uses CSS blur, which the README notes is not supported in all modern browsers, primarily WebKit-based ones. Check current browser compatibility and provide fallbacks if needed.

Question 7

How to manually open and close Avgrund popups?

Accepted Answer

Initialize with openOnEvent: false to show on load, and use closeByEscape or closeByDocument options. For programmatic control, you can trigger events or use jQuery methods, but the README focuses on event-driven initialization.

jquery.avgrund.js

What is jquery.avgrund.js?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions