magento2: Modal UI: clickableOverlay option doesn't work

Preconditions

Magento 2.1.2

Steps to reproduce

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

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

Expected result

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

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

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 11
Comments: 24 (12 by maintainers)

Commits related to this issue

fix modal clickable overlay matching https://github.com/magento/magento2/commit/4c53cafc638476cdb631f38919b0b795c15db627 https://github.com/magento/magento2/issues/7399 — committed to digiltd/magento2-theme-blank-sass by digiltd 6 years ago
Merge pull request #7399 from magento-l3/ACP2E-120-2.4.4 ACP2E-120: Magento_Fedex Package description and handling fee issue — committed to magento/magento2 by sidolov 2 years ago

Most upvoted comments

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/

erikhansen on Jan 7, 2017

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

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

sarkadiadam on Nov 9, 2020

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.

zaximus84 on Aug 14, 2019

@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

erikhansen on May 18, 2017

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

BB-000 on Aug 8, 2019

I do not see this fix in the Magento 2.2.5 release

hamdrew on Jul 11, 2018

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

BB-000 on May 18, 2017