ポップアップ効果を実現するにはjsを使用します

<!-- ポップアップ レイヤー -->
<div id="popLayer"></div> <!--黒いマスク-->
<div id="popBox">
  <div class="閉じる">
   バツ
  </div>
  <div>
   <!-- 目次 -->
 </div>
</div>

//閉じるボタンをクリックします var close = document.querySelector(".close")
close.onclick = 関数（）{
 console.log("クリック")
 var popBox = document.getElementById("popBox");
 var popLayer = document.getElementById("popLayer");
 popBox.style.display = "なし";
 popLayer.style.display = "なし";
}


//表示が必要なときに呼び出しますvar popLayer = document.getElementById("popLayer");
popBox.style.display = "ブロック";
popLayer.style.display = "ブロック";

/* ポップアップレイヤー*/
#popレイヤー{
 表示: なし;
 背景色: #000;
 位置: 絶対;
 上: 0;
 右: 0;
 下部: 0;
 左: 0;
 zインデックス: 10;
 不透明度: 0.6;
}

/*ポップアップレイヤー*/
#ポップボックス{
 表示: なし;
 背景色: #FFFFFF;
 zインデックス: 11;
 幅: 220ピクセル;
 高さ: 300px;
 位置: 固定;
 上: 0;
 右: 0;
 左: 0;
 下部: 0;
 マージン: 自動;
}

/*閉じるボタン*/
#popBox .close {
 幅: 20px;
 高さ: 20px;
 境界線の半径: 50%;
 位置: 絶対;
 境界線: 1px 実線 #fff;
 色: #fff;
 テキスト配置: 中央;
 行の高さ: 20px;
 右: 8px;
 上: 8px;
 zインデックス: 50;
}

#popBox .close {
 テキスト装飾: なし;
 色: #2D2C3B;
}