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

[nntoan]

@erikhansen It's working. Please create a PR :)

[magento-engcom-team]

@thdoan, thank you for your report. We've created internal ticket(s) MAGETWO-63410 to track progress on the issue.

[mak0605]

Hello I am looking for this issue #mm18in

[magento-engcom-team]

@mak0605 thank you for joining. Please accept team invitation here and self-assign the issue.

[SimonAnguish]

I have a quick solution for this. In a custom css file, you can add bottom: initial and overflow-y: inherit !important (or increase the specificity) to the .modal-popup class. This causes the modal to only cover the top line of the screen, but the content still shows.

[alpacode-pmakowski]

distributed-cd hello, i am going take a look if can help a bit with that.

[magento-engcom-team]

@virtua-pmakowski thank you for joining. Please accept team invitation here and self-assign the issue.

[magento-engcom-team]

Hi @thdoan. Thank you for your report. The issue has been fixed in magento/magento2#15172 by @virtua-pmakowski in 2.2-develop branch Related commit(s):

• abe727a3f74449c79f345fd1234ee2473c1fb576

The fix will be available with the upcoming 2.2.5 release.

[shibinvr]

hi when upgrade with ClassyLlama_ModalEnhancements.zip module but still modal not close when click overlay. any idea why

[sidolov]

Hi @thdoan. Thank you for your report. The issue has been fixed in magento/magento2#16665 by @mageprince in 2.1-develop branch Related commit(s):

• 4c53cafc638476cdb631f38919b0b795c15db627

The fix will be available with the upcoming 2.1.15 release.

[sidolov]

Hi @thdoan. Thank you for your report. The issue has been fixed in magento/magento2#16664 by @mageprince in 2.3-develop branch Related commit(s):

• 76ae28f82032a0af152d3285bedc1ffa46ff2055

The fix will be available with the upcoming 2.3.0 release.

[hamdrew]

I do not see this fix in the Magento 2.2.5 release

[BB-000]

.modal-popup { pointer-events: none; }

[zaximus84]

This is not fixed in 2.2. The CSS for pointer-events is present, but modal.js doesn't actually handle a click on the overlay. clickableOverlay is present in the default options, but it's not found anywhere else in the file (meaning it's not used). Comparing 2.1, 2.2, and 2.3, the _createOverlay method is lacking lines in 2.2.

[m2-assistant[bot]]

Hi @engcom-Charlie. Thank you for working on this issue. In order to make sure that issue has enough information and ready for development, please read and check the following instruction: :point_down:

• [ ] 1. Verify that issue has all the required information. (Preconditions, Steps to reproduce, Expected result, Actual result).

  Details

  If the issue has a valid description, the label Issue: Format is valid will be added to the issue automatically. Please, edit issue description if needed, until label Issue: Format is valid appears.

• [ ] 2. Verify that issue has a meaningful description and provides enough information to reproduce the issue. If the report is valid, add Issue: Clear Description label to the issue by yourself.

• [ ] 3. Add Component: XXXXX label(s) to the ticket, indicating the components it may be related to.

• [ ] 4. Verify that the issue is reproducible on 2.3-develop branch

  Details

  - Add the comment @magento give me 2.3-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.3-develop branch, please, add the label Reproduced on 2.3.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and stop verification process here!

• [ ] 5. Add label Issue: Confirmed once verification is complete.

• [ ] 6. Make sure that automatic system confirms that report has been added to the backlog.

[engcom-Charlie]

Hello @zaximus84 Branch 2.2-develop was closed and Magento no longer accepts pull requests and issues to the v2.2 release lines to focus all development efforts on v2.3._ See Accepted pull requests and ported code for more details So i close this issue.

[LiamKarlMitchell]

Still a problem in Magento 2.3.0

[sarkadiadam]

Hello, made it work by applying a small css fix (if anyone is still interested):

.modal-popup {
    pointer-events: none;
    touch-action: none;
}