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

[mageprince]

Original Pull Request

#15172
…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-engcom-team]

Hi @mageprince. Thank you for your contribution.
We will aim to release these changes as part of 2.1.15.
Please check the release notes for final confirmation.