Magento 2 – How to Close Modal Popup by Clicking Outside the Modal Content

jquerymagento2popupwidgets

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

Best Answer

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

Related Topic