CSS Modal :target Selector

CSS Modal :target Selector.markdown

CSS Modal :target Selector

A Pen by Jake Albaugh on CodePen.

License.

index.html

<a href="#target-content" id="button">Open CSS Modal via <code>:target</code></a>

<div id="target-content">
  <a href="#" class="close"></a>
  <div id="target-inner">
    <h2>CSS Modal</h2>
    This modal is open because its id is the target in the <code>href</code> of the link. You can style an element's target state with the selector <code>:target</code>. When this modal is toggled, an invisible link with <code>href="#"</code> is positioned absolutely behind the modal content. Clicking it will change the target and thus close the modal.
    
  </div>
</div>

style.sass

#target-content
  // content wrapper full window size
  position: fixed
  top: 0
  right: 0
  bottom: 0
  left: 0
  // so we can click through it when transparent
  pointer-events: none
  // transparent
  opacity: 0
  // sexy fade
  transition: opacity 200ms
  
  // :target selects when href click is "#target-content"
  &:target
    // reenable clicking
    pointer-events: all
    // show that ish
    opacity: 1
      
  // the white centered content
  #target-inner
    position: absolute
    display: block
    padding: 48px
    line-height: 1.8
    width: 70%
    top: 50%
    left: 50%
    transform: translateX(-50%) translateY(-50%)
    box-shadow: 0px 12px 24px rgba(0,0,0,0.2)
    
    background: white
      
    color: #34495E
    h2
      margin-top: 0
    
    code
      font-weight: bold
  // the giant invisible close area (making a new target "#")
  a.close
    content: ''
    position: absolute
    top: 0
    right: 0
    bottom: 0
    left: 0
    background-color: #34495E
    opacity: 0.5
    transition: opacity 200ms
    &:hover
      opacity: 0.4
    
    
// unimportant stuff
body
  background-color: #ECF0F1
  color: #444
#button
  position: absolute
  top: 50%
  left: 50%
  transform: translateX(-50%) translateY(-50%)
  padding: 16px 24px
  border-radius: 1px
  text-decoration: none
  font-size: 24px
  display: block
  color: white
  background-color: #34495E
  text-align: center
  font-weight: 100
  transition: box-shadow 200ms
  border-radius: 4px
  &:hover
    box-shadow: 0px 12px 24px rgba(0,0,0,0.2)