Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Forwardport] 7399-clickableOverlay-less-fix - added pointer-events rule to .modal-… #16664

Merged
merged 1 commit into from
Jul 11, 2018
Merged

[Forwardport] 7399-clickableOverlay-less-fix - added pointer-events rule to .modal-… #16664

merged 1 commit into from
Jul 11, 2018

Conversation

mageprince
Copy link
Contributor

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

…popup class to let user click deeper than modals and reach to overlay's div in modal-wrapper div
@magento-engcom-team
Copy link
Contributor

Hi @mageprince. Thank you for your contribution
Here is some useful tips how you can test your changes using Magento test environment.
Add the comment under your pull request to deploy test or vanilla Magento instance:

  • @magento-engcom-team give me test instance - deploy test instance based on PR changes
  • @magento-engcom-team give me {$VERSION} instance - deploy vanilla Magento instance

For more details, please, review the Magento Contributor Assistant documentation

@magento-engcom-team
Copy link
Contributor

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

@mageprince mageprince deleted the 2.3-develop-PR-port-15172 branch July 11, 2018 13:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants