7399-clickableOverlay-less-fix - added pointer-events rule to .modal-…

[alpacode-pmakowski]

…popup class to let user click deeper than modals and reach to overlay's div in modal-wrapper div

To reproduce issue please see: #7399

Description

Problem: modal's overlay div would not catch click event because is covered by modal's div above. That's why modal is would not fire close event when user is clicking outside modal.

My proposition of solution for that issue is add pointer-events: none css rule to modals in theme's less files.

Fixed Issues (if relevant)

1. Modal UI: clickableOverlay option doesn't work #7399: Modal UI: clickableOverlay option doesn't work

Test scenario

1. Add a code to any .phtml template file:

<button id="btn-modal">
   Click to open modal
</button>

... add a js script code

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

2. Open modal and click to overlay to close it

Contribution checklist

• Pull request has a meaningful description of its purpose
• All commits are accompanied by meaningful commit messages
• All new or changed code is covered with unit/integration tests (if applicable)
• All automated tests passed successfully (all builds on Travis CI are green)

[magento-cicd2]

All committers have signed the CLA.

[magento-engcom-team]

Hi @virtua-pmakowski. Thank you for your contribution.
Changes from your Pull Request will be available with the upcoming 2.2.5 release.

[hamdrew]

I do not see this code change when I updated to Magento 2.2.5