如何防止模式重新加载页面时闪烁？

Question

下面的示例在CSS-Tricks处，看来当重新加载页面时，具有模态内容的div在重新加载页面时会闪烁。

我可以采取哪些步骤来防止这种情况的发生，同时仍然利用CSS-Tricks方法来隐藏和显示隐藏的模式div？

谢谢

请参见克里斯Considerations for Styling a Modal上的克里斯·科耶（@chriscoyier）的笔CodePen。

  .modal {
  /* This way it could be display flex or grid or whatever also. */
  display: block;

  /* Probably need media queries here */
  width: 600px;
  max-width: 100%;

  height: 400px;
  max-height: 100%;

  position: fixed;

  z-index: 100;

  left: 50%;
  top: 50%;