How can I disable the entire page apart from a specific div?

Question

I have a pop up <div> element and when it appears, the content behind it changes to opacity: 0.2 to make the <div> stand out using this line of code:

$(".main").css("opacity", "0.2");

How can I "disable" the content behind the <div> to prevent it from being clickable using jQuery?

I have these lines of code to prevent buttons from being clickable and preventing the pointer cursor from appearing, but it doesn't fully disable the content as text can still be highlighted and there's probably more:

$("form :input").attr("disabled","disabled");
$(".main .input").css("cursor", "auto"); 

Is there one line of code which literally disables the page (apart from the div), rather than a different line of code for each thing (e.g stopping text from being highlighted and disabling buttons)?

Answer 1

There are basically two options to choose from: using css user-select: none with it's current disadvantage (browser support) https://developer.mozilla.org/en-US/docs/Web/CSS/user-select or by adding a overlay div between the modal and the actual content. there are several methods out there, the following link will give you an overview and will point you in the right direction: https://tympanus.net/codrops/2013/11/07/css-overlay-techniques/

Personally i would use the pseudo-element technique and instead of updating the opacity directly toggle a class on the main element:

/* JS */
$(".main").addClass("has-overlay");

/* CSS */
.main.has-overlay {
  opacity: 0.2;
}

.main:after {
  content: "";
  display: none;
  position: fixed; /* could also be absolute */ 
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
  background transparent;
}

.main.has-overlay:after {
  display: block;
}