<div class="page">
  <a href="#popup">Click Me</a>
</div>

<div id="popup" class="box">
  <a href="#">X close</a>
<div>  
    

.box{
  display:none;/*原先會是隱藏*/
}

.box:target{
  display:block;/*被連結到會出現*/
}




/*Extra CSS*/
body {
    background-color: #555;
    padding: 10% 20%;
    text-align: center;
    font-size: 80px;
    font-family: sans-serif;
}

a {
    text-decoration: none;
    color: #fff;
}

#popup {
    position: relative;
    background: dodgerblue;
    margin-top: -1em;
    padding: 2em 0.5em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.