Modal UI: clickableOverlay option doesn't work

[thdoan]

Preconditions

1. Magento 2.1.2

Steps to reproduce

1. Go into any template and create a modal widget with this code:

require(['Magento_Ui/js/modal/modal'], function(modal) {
  $('#some-element').click(function(e) {
    e.preventDefault();
    $('<p>Overlay content</p>').modal().modal('openModal');
  });
});

2. Click on $('#some-element') to show the overlay.
3. Click on the overlay (shadow).

Expected result

1. According to the documentation, the default clickableOverlay value is true, which means "Close the modal window when a user clicks on the overlay".

Actual result

1. Nothing happens (i.e., the overlay does not close). Even when you manually specify the option, it doesn't work:

$('<p>Overlay content</p>').modal({ clickableOverlay: true }).modal('openModal');

[BB-000]

+1 , The z-index of the popup is higher than the .modals-overlay, but the popup wrapper

covers the whole screen area, making the overlay unclickable.

Increasing the z-index of the .modals-overlay makes the click-to-close work, but the popup is then put behind whatever the background colour of the .modals-overlay is . . .

[erikhansen]

I've encountered this issue on multiple projects.

[erikhansen]

We created a workaround for this issue in a custom theme using a RequireJS mixin by adding the following files:

app/design/frontend/<VENDOR>/<THEME>/Magento_Ui/web/js/model/modal-mixin.js

define([
    'jquery',
    'mage/utils/wrapper'
], function ($, wrapper) {
    'use strict';

    return function (modal) {

        modal.prototype.openModal = wrapper.wrap(modal.prototype.openModal, function(original) {

            var result = original();
            $('.' + this.options.overlayClass).appendTo('.modal-popup._show');
            //Setting z-index of inner-wrap to 900 so that it is actually clickable and not hiding behind the overlay
            $('.modal-inner-wrap').css('z-index', 900);
            return result;
        });

        return modal;
    };
});

app/design/frontend/<VENDOR>/<THEME>/requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Ui/js/modal/modal': {
                'Magento_Ui/js/model/modal-mixin': true
            }
        }
    }
};

See this great article by Alan Storm for info on M2's RequireJS Mixins: http://alanstorm.com/the-curious-case-of-magento-2-mixins/

[miakusha]

Hi @thdoan thanks for report
We've created internal ticket MAGETWO-63410 to address this issue.

[BB-000]

@erikhansen Unfortunately for me that fix works on desktop (popup) but breaks mobile (slide) modals...

[erikhansen]

@BB-000 Yeah, we discovered some issues with the code I posted previously and have since refactored and moved the code into a standalone extension called ClassyLlama_ModalEnhancements. I've attached it to this comment. Use at your own risk.

ClassyLlama_ModalEnhancements.zip