Disable leaflet interaction temporary

your going to want to do (assuming your map is call map)

map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
map.boxZoom.disable();
map.keyboard.disable();
if (map.tap) map.tap.disable();
document.getElementById('map').style.cursor='default';

turn it on again with

map.dragging.enable();
map.touchZoom.enable();
map.doubleClickZoom.enable();
map.scrollWheelZoom.enable();
map.boxZoom.enable();
map.keyboard.enable();
if (map.tap) map.tap.enable();
document.getElementById('map').style.cursor='grab';

If you don't want to disable each handler manually, you can loop over all of them and disable/enable them.

Disable

map._handlers.forEach(function(handler) {
    handler.disable();

});

Enable

map._handlers.forEach(function(handler) {
    handler.enable();

});

I think, you can wrap your map with a helper container and you can disable it with simple CSS class like is-locked.

Here's what I'm talking about:

.map-container {
  position: relative;
}

.map-container .map {
  position: relative;
  z-index: 1;
}

.map-container.is-locked:after {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  content: "";
  display: block;
}

I hope it helps.