Fullscreen More Info

Semantic fullscreen "more info" content toggle.

by the_voder

HTML

<details>
	<summary>More Info</summary>
	<!-- <div class="underlay"></div> -->
	<div>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc malesuada felis et justo rutrum vulputate. Donec porttitor malesuada mauris, ut ultricies augue semper vitae. Nulla bibendum id neque ut tempor. In a luctus leo. Ut hendrerit dolor non lectus condimentum venenatis. Integer vel dapibus enim. Sed bibendum elit neque, non porttitor justo rutrum in.</p>
		<!-- <p>Fusce elementum vehicula diam ut scelerisque. Phasellus risus ex, mollis eu metus et, suscipit pulvinar turpis. Maecenas quis metus sem. Proin nulla mauris, tincidunt non efficitur ac, blandit at enim. Donec non aliquet augue. Nulla fringilla tristique sem, eu hendrerit purus porttitor in. Aliquam mollis dictum metus. Quisque at ipsum in massa tristique tristique a quis velit. Praesent dignissim quam sem, at tempus ligula varius laoreet. Integer at dignissim nulla. Vestibulum finibus purus quis libero malesuada, a placerat magna volutpat. In at elementum odio, id hendrerit neque. Donec semper a neque ac congue. Donec in dui sed magna lobortis euismod.</p> -->
	</div>
</details>

CSS

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  background-color: #aaa;
}

/* TOGGLEABLE CONTENT ELEMENT */
details {
	position: relative;
	z-index: 1;
}

/* TITLE OF TOGGLE ITEM */
summary {
  margin: 0;
  padding: 10px;
  /* suppress outline around element when clicked */
  outline: none;
  /* change cursor over element */
  cursor: pointer;
  /* hide disclosure widget */
  list-style: none;
}

details>div {
  position: fixed;
  width: 80vw;
  left: 10vw;
  background-color: red;
}

/* THIS IS THE "LIGHTBOX"OVERLAY.
AUTOMATICALLY INSERTED BEFORE OTHER CONTENT */
details>div::before {
  position: fixed;
  width: 100vw;
  height: 100vh;
  margin: 0;
  top: 0;
  right: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
  content: "";
}

/* PARAGRAPH ELEMENTS INSIDE TOGGLEABLE ELEMENT */
details>div p {
  padding: 20px;
  background-color: #fff;
}