CSS謎語，不知道如何修改一段代碼

Question

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

這裏是實時代碼。它的CSS對話框。
問題是，它的beign顯示由：

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

通過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函數顯示模式。 我更喜歡在JavaScript中使用JQuery，但您可以使用純JavaScript實現。

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

的CSS類活性顯示的模態（顯示：塊）或其不透明度設置爲1。