7

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

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

5

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 perfect.

<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>
  • In e.target.className ,what class should i give here – Jaisa Aug 3 '18 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 '18 at 6:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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