假设当我点击一个div时，会弹出一个全屏的遮罩层，里面内容显示四张图片，当我点击内容以外的区域，关闭遮罩层，请给出完整的代码

好的，以下是完整的代码：

HTML代码：

<div id="mask">
  <div id="content">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
    <img src="image4.jpg">
  </div>
</div>

CSS代码：

#mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: none; /* 隐藏遮罩层 */
}

#content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#content img {
  display: block;
  max-width: 100%;
  height: auto;
}

JavaScript代码：

var mask = document.getElementById('mask');
var content = document.getElementById('content');

function showMask() {
  mask.style.display = 'block';
}

function hideMask() {
  mask.style.display = 'none';
}

content.addEventListener('click', function(event) {
  event.stopPropagation(); /* 阻止事件冒泡 */
});

mask.addEventListener('click', function() {
  hideMask();
});

document.addEventListener('keydown', function(event) {
  if (event.keyCode === 27) { /* ESC键 */
    hideMask();
  }
});

var div = document.getElementById('div');
div.addEventListener('click', function() {
  showMask();
});

当你点击 #div 时，会触发 showMask() 函数，显示遮罩层。点击遮罩层以外的区域，会触发 hideMask() 函数，隐藏遮罩层。如果按下 ESC 键，也会隐藏遮罩层。