Magento – How to remain modal popup open by clicking outside the modal-content in Magento 2.6

magento2modal-popup

When I tried to click outside of the modal area modal getting closed how to prevent that and modal should not be closed when the user clicks outside of modal.

define([
        "jquery",
        "Magento_Ui/js/modal/modal"
    ], function($, modal){
        var modalls = [];
        var AlertModal = {

            initModal: function(config, element) {
                modalls.push($(config.target));
                $target = $(config.target);
                $target.modal();
                $element = $(element);
                $("#cancelConfirmationMessageBtn").unbind('click').click(function() {
                // jQuery("#cancelConfirmationMessageBtn").click(function(){
                    var url = window.location.href,
                    parts = url.split("/"),
                    lastPartOfUrl = parts[parts.length-2];
                    if(lastPartOfUrl == 'checkout') {
                        var options = {
                            type: 'popup',
                            responsive: true,
                            innerScroll: false,
                            clickableOverlay: true,
                            title: "",
                            buttons: [{
                                text: $.mage.__('OK'),
                                class: 'button',
                                click: function () {
                                    popupdata.modal('closeModal');
                                    var tt = modalls.pop();
                                    modalls.push(tt);
                                    tt.modal('openModal');
                                }
                            }]
                        };
                        var popupdata = $('<div />').append($('#warning-message'));
                        modal(options, popupdata);
                        popupdata.modal('openModal');
                        $('.warning-message').css('display','block');
                        //$(".modal-header").hide();
                       // $(".modal-content").css({"padding":"20px","margin-top": "20px"});
                       // $(".modal-footer").css("border-top", "none");
                        $(".modal-inner-wrap").css("width", "60%");
                    }
                    var tt = modalls.pop();
                    modalls.push(tt);
                    tt.modal('closeModal');
                });
                jQuery("#okOtherMessageBtn").click(function(){
                    var tt = modalls.pop();
                    tt.modal('closeModal');
                });
                $element.ready(function() {
                    $target.modal('openModal');
                    $(".modal-header").hide();
                    $(".modal-footer").hide();
                    $(".modal-inner-wrap").css("width", "60%");
                });
            }
        };

        return {
            'alert': AlertModal.initModal
        };
    }
);

Best Answer

Your options is set to close the modal if user clicks outside. Just change this line

clickableOverlay: true

into

clickableOverlay: false

For more information here