CSS谜语，无法想象如何修改代码片段

Question

http://fiddle.jshell.net/ycc7anhy/1/show/

这是实时代码。它的CSS对话框 问题是，它的表现是：

<a href="#modal-one">Modal!</a>

通过href元素，我无法弄清楚如何将其更改为例如javascript onclick或任何其他方法（情侣会受到赞赏）。

这个css可能与它有关：

.modal:target:before {
    display: block;
}
.modal:target {
    position: absolute;
    top: 0;
}

Answer 1

首先，您的HTML代码应如下所示

<a onclick="toggle-modal('#mymodal')" > OPEN MODAL </a>

<div Id="mymodal" > your modal content </div>

默认情况下，隐藏模态（显示无或不透明度0）。然后使用JavaScript函数显示模态。 我更喜欢使用JQuery和JavaScript，但你可以使用纯JavaScript。

Function toggle-modal(modalID){
    $('#mymodal').classList.toggle('active'); }

CSS类活动显示模态（显示：块）或将其不透明度设置为1。