半透明のマスクをかける

ポップアップウィンドウの外側の領域のように半透明のマスクをかけたい場合は マスクをかけたい要素の子どものdivを以下のように設定すればいい。 mask用divはposition: absoluteにして親要素全体を覆うようにする。 親はposition: relativeにしないといけない。

<div style="position: relative">
    ...
    <div class="mask" />
</div>

mask {
  content: '\A';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: black;
  opacity: 0.5;
}

参考：