Если пользователь щелкает где-нибудь за пределами модального окна, закройте его, как это сделать в Fotorama / jQuery

Question

Для моего сайта я использую Magento 2 с Ultimo, и это использует Fotorama для отображения изображений в полноэкранном режиме. Однако всякий раз, когда я открываю картинку в полноэкранном режиме, мне приходится нажимать кнопку "X", и я этого не хочу. В W3schools есть учебное пособие по созданию модальных функций, которые работают так, как я хочу, но мне нужно интегрировать это в мой код для фоторамки, чтобы не нарушать другие функции.

В W3schools есть учебное пособие по созданию модального режима, который функционирует так, как я хочу, но мне нужно интегрировать это в мой код Fotorama, чтобы не нарушать другие функции. Ссылка на W3: https://www.w3schools.com/howto/howto_css_modals.asp

function cancelFullScreen() {
        if (that.fullScreen) {
            that.fullScreen = false;

            if (FULLSCREEN) {
                fullScreenApi.cancel(fotorama);
            }

            $BODY.removeClass(_fullscreenClass);
            $HTML.removeClass(_fullscreenClass);

            $fotorama
                .removeClass(fullscreenClass)
                .insertAfter($anchor);

            measures = $.extend({}, measuresStash);

            unloadVideo($videoPlaying, true, true);

            updateTouchTails('x', false);

            that.resize();
            loadImg(activeIndexes, 'stage');

            lockScroll($WINDOW, scrollLeft, scrollTop);

            triggerEvent('fullscreenexit');
        }
    }

Где-то в этой части кода я думаю, что мне нужно подключиться. Какие-либо предложения?