popup without js

by victorrseloy

HTML

<a href="#modal">open</a>
<div class="transition" id="modal">
<a href="#">X</a>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis enim velit, eu vestibulum mi ultricies a. Maecenas tortor tellus, volutpat a venenatis vel, hendrerit quis mi. Mauris ultrices rutrum mauris, in sagittis tortor pharetra vel. Vivamus vitae felis risus. Nam at laoreet mauris, at dapibus erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris efficitur quam non odio commodo efficitur. Aenean mollis euismod sem vel mollis. Duis bibendum justo libero, nec gravida neque sagittis in. Aenean facilisis erat augue, ut congue leo vestibulum non. In non consequat odio. Curabitur odio neque, pretium ultrices elit ut, condimentum ullamcorper ante. Integer vel porttitor dolor, sed suscipit erat. Donec aliquam posuere lorem, eu ultricies elit consectetur eget.

Vivamus lacus nisl, fermentum vitae egestas vel, congue faucibus ipsum. Praesent efficitur orci et lorem dictum, vel gravida justo ullamcorper. Aenean lacinia luctus massa, vehicula fermentum ante. Sed enim purus, posuere at purus sit amet, feugiat auctor turpis. Curabitur ornare, est vitae suscipit dapibus, nunc mauris dignissim massa, ut feugiat neque dolor ac est. Ut ornare congue nunc in fringilla. Integer mollis, enim a fermentum hendrerit, enim metus vehicula leo, dapibus pharetra lorem nulla non sapien. Aenean orci ipsum, varius ut magna eget, tincidunt tincidunt nunc. Phasellus non mauris vitae magna vehicula varius. Praesent rutrum pellentesque facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent lacinia dui a tellus porttitor, id iaculis magna scelerisque. Ut congue a enim ac commodo. Etiam in nisi lectus. Ut tincidunt eget est non volutpat.
</p>
</div>

CSS

#modal{
  width:0;
  height:0;
  overflow:hidden;
  opacity:0;
  transition: opacity 0.3s linear;
}


#modal:target{
  width:50vw;
  display:block;
  height:50vh;
  margin:auto;
  position: absolute;
  top: calc(50% - 50vh/2);
  left: calc(50% - 50vw/2);
  opacity:1;

  transition: opacity 0.3s linear;
}