Prevent bg scroll

[ceremcem]

When a modal contains some complex objects that introduces scrolling, such as an image editor:

...underlying page (below modal) should not be scrolled while in the process of interaction. This commit adds a switch for that purpose:

Usage

<modal ... prevent-bg-scroll="true">
   (some long content)
</modal>

Is breaking

No.

[kouts]

This is intentionall. ractive-modal shouldn't enforce any scroll locking behavior on the parent page, it's not good UX since some users might want to scroll to see what's behind the modal.
Also bear in mind that this is not a "one fix catch all" solution because some devices (e.g iOS) require a different solution (check here for example).

Instead of hard-coding this behavior into ractive-modal what I think is the most appropriate solution is to hook on the beforeOpen and afterClose events and apply this behavior yourself.
In fact the demo page uses this exact technique:

check here

ractive-modal/demo/index.html

Line 469 in 49faed3

'popup.beforeOpen callbacks-popup.beforeOpen': function(){

and here

ractive-modal/demo/index.html

Line 472 in 49faed3

'popup.afterClose callbacks-popup.afterClose': function(ctx){

.

[kouts]

@ceremcem thank you for contributing and please also check the dev branch which introduces CSS animations for the modal and the backdrop.

[kouts]

I have created a fix for this in dev 5cdf7c3 can you check if this works for you?

[kouts]

This functionality is now implemented as a plugin .
Additional documentation has been added into the demo page.
Thank you.

[ceremcem]

There are couple of problems with this "inheritance" approach:

1. Today we need to add feature A and this is our way to go.
2. Tomorrow we may need to add feature B. How can we merge these two?
3. The other day we may add feature C which may explicitly require to disable feature A. How do the user know this?

Most important question is #2.

Proposal

At least, we should find a way to provide a simple switch, like

Ractive.components.modal = RactiveModal.config({
  preventBackgroundScroll: true,
  featureX: false,
  foo: 'bar'
});

[ceremcem]

Here is the working proposal: Playground

// initialize with default settings
Ractive.components.modal = RactiveModal();

// or initialize with initialization options
Ractive.components.modal = RactiveModal({
  "background-scroll": 'allow',  // "allow" or "prevent"
  featureX: false,
  foo: 'bar'
});

In the template, user is allowed to set it explicitly to override the default settings:

<modal background-scroll="prevent" ...></modal>