Here's an example implementation in JavaScript:

javascriptCopy code
function addOrRemoveCoverElement(on, zIndex) {
  const coverElement = document.getElementById('coverElement');
  if (on) {
    if (coverElement) {
      // Cover element already exists, no need to create a new one
      return;
    }
    const element = document.createElement('div');
    element.id = 'coverElement';
    element.style.position = 'fixed';
    element.style.top = 0;
    element.style.left = 0;
    element.style.width = '100%';
    element.style.height = '100%';
    element.style.backgroundColor = 'transparent';
    element.style.zIndex = zIndex;
    document.body.appendChild(element);
  } else {
    if (coverElement) {
      document.body.removeChild(coverElement);
    }
  }
}

This function takes two arguments: on, which is a boolean indicating whether to add or remove the cover element, and zIndex, which is an integer indicating the z-index to use for the cover element.

If on is true and there is no existing cover element, the function creates a new div element, sets its id, position, top, left, width, height, backgroundColor, and zIndex properties, and appends it to the body element.

If on is false and there is an existing cover element, the function removes the element from the body.

Note that the cover element is transparent, so it won't be visible, but it will prevent mouse events from going to iframes on the page. Also, this implementation should not cause scroll bars to do weird things, since the cover element is positioned fixed and takes up the entire viewport.