Disable modal pop-up from closing when clicking outside it

You can prevent your bootstrap modal from closing when clicking on gray area when using the below HTML code for the button

<button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
    Open Modal
 </button>`

here in the above code data-backdrop="static" data-keyboard="false", HTML attributes will help you to prevent closing the modal.

Data-keyword="false" is to prevent closing modal while clicking Esc button, while data-backdrop="static", allows you keep modal pop-up opened when clicking on Gray area.

If you want to make it work using jQuery, you can do something like this:

$('#myModal').modal({
    backdrop: 'static',
    keyboard: false  // to prevent closing with Esc button (if you want this too)
})

If you want to change the default behaviour of all modal pop-up, you can use below jQuery code after your document is loaded

$.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';
$.fn.modal.prototype.constructor.Constructor.DEFAULTS.keyboard =  false;

Benefit of that will be to use it in your Master/Layout page below main bootstrap.js to overide it for you in all modal pop-ups use one code.

You can also use "data-keyboard="false" data-backdrop="static"" in Modal Pop-up code

<div class="modal fade" id="myModal" data-keyboard="false" data-backdrop="static">
   !--Modal code Here -->
</div>

data-backdrop="static" to avoid closing Pop-up when you click outside of it

data-keyboard="false" to avoid closing Pop-up when you click "Escape'

You can also do it using CSS

.modal{
    pointer-events: none;
}

.modal-dialog{
    pointer-events: all;
 }

Note: Above Solution will turn off browser scroll.

You can make it global CSS to apply it for all Modals.