How to close modal popup by clicking outside the modal-content in Magento 2

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

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>