javascript - 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 类 active 显示模态 (display:block) 或将其不透明度设置为 1。