6

I have created a popup successfully by using Magento 2 modal code as i added below but now i want to close the popup even customer click on outside the pop-up or blur area.

Is there any existing feature or code can help us to achieve this?

Can anyone help on this.

var showFinanceCaclculator = $('div#finance-pre-calculated-values')
    .modal({
          autoOpen: false,
          buttons: [],
          clickableOverlay: true,
          focus: '',
          innerScroll: false,
          modalClass: '',
          modalLeftMargin: 60,
          responsive: true,
          title: 'Estimated Finance Terms',
          type: 'popup'
         });
        $("#show-finance-button").click(function () {
           showFinanceCaclculator.modal("openModal");
       });
1

3 Answers 3

8

We fixed 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
            }
        }
    }
};

Read more here: https://github.com/magento/magento2/issues/7399

0
8

Hi just place the below code in the footer file or any file which is common on all pages and it will do your job. I was also going to the same issue and came out with this and it works perfectly.

<script type="text/javascript">
    require(['jquery'],
    function($) {
$(document).ready(function(){
$("body").click
(
  function(e)
  {
      var checkclass = e.target.className ;  
        if (checkclass.indexOf("_show") >= 0){

                    $( ".action-close" ).trigger( "click" );
        }
      //console.log(e.target.className);

  }
);
    }); });
</script>
2
  • In e.target.className ,what class should i give here
    – Jaisa
    Aug 3, 2018 at 4:50
  • You just need to use the same class name as above code. just copy paste the code and it should work. Thanks
    – Rohit Goel
    Aug 3, 2018 at 6:12
1

Although above answers relies on js mixin solution but the thing is that magento already closes the modal when you click outside the modal window by triggering closeModal method on outerClickHandler function provided as an option.

The neat css trick that the default luma theme does is to prevent click on modal-popup by setting pointer-events to none and then again re-enabling it on child modal-inner-wrap element by setting pointer-events to auto.

In this way modal will be always in front of modals-overlay and still modals-overlay will be always clickable.

Check if somehow these properties missed/changed in your custom theme.

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

.modal-inner-wrap {
   pointer-events: auto;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.