css - 模态不会在点击时出现，但会在点击时消失就好了

Question

这是有问题的页面： https ://www.alchemycreative.studio/test-layout-3/

小汉堡图标指向“#openModal”，但除非您在新选项卡中打开它，否则它不起作用。但是，当您单击指向“#”的 X 时，它会很好地消失。

他们都使用相同的技术。谁能告诉我为什么它不适用于汉堡包？模态在页面加载后出现和消失的地方也做了一件奇怪的事情。

我遵循的说明在这里，并附有演示： https ://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/

下面是我的 CSS，它去掉了所有额外的样式：

.modalDialog {
    position: fixed;
    z-index: 999;
    opacity:0;
    -webkit-transition: opacity 800ms ease-in-out;
    -moz-transition: opacity 800ms ease-in-out;
    transition: opacity 800ms ease-in-out;
    pointer-events: none;
}
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}