Dynamic Drive CSS Library- Pure CSS Modal Window

CSS Library

Hosting Discounts

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

CSS Library: Other: Here

Pure CSS Modal Window

Author: Dynamic Drive

CSS's: :target pseudo class is one of those underused features of CSS with lots of exciting potential applications. It is triggered when the page's URL fragment (#myelement) matches an element's ID; in other words, when the user jumps to a specific element on the page.

Using the :target pseudo class, the following shows how to create pure CSS Modal Windows that are triggered when the user clicks on an HTML anchor link. Look Mah no JavaScript! The modal can easily be dismissed by creating another HTML anchor that points to a non existent or different element on the page.

Browser compatibility wise, the :target pseudo class is well supported in modern browsers, including IE9+. In lesser browsers, the modal windows simply won't be shown.

Demo:

Simple Modal Modal Dialog

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim, placerat id eleifend eu, semper vel sem. Close Modal

CSS Only Modal ×

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim, placerat id eleifend eu, semper vel sem.

The CSS:

<style>

/* Demo CSS for buttons to activate modal. Remove if not using */

.btn{
	display: inline-block;
    text-decoration: none;
    margin-right: 10px;
    border-radius: 5px;
    padding: 8px 10px;
    background: #15C5FF;
    color: white !important;
}

.btn:nth-of-type(2){
    background: #40C400;
}


/* Unopened CSS Modal */
.cssmodal {
    display: flex;
    position: fixed;
    left: 0;
    top: -100%;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    opacity: 0;
    -webkit-transition: top 0s .5s, opacity .5s 0s;
    transition: top 0s .5s, opacity .5s 0s;
}

/* Opened CSS Modal */
.cssmodal:target {
    top: 0;
    opacity: 1;
    -webkit-transition: none;
    transition: none;
}

/* CSS Modal content */
.cssmodal figure {
    width: 95%;
    max-width: 600px;
    position: relative;
    padding: 1.5em;
    opacity: 0;
    background-color: white;
    -webkit-transition: opacity .5s;
    transition: opacity .5s;
}

/* Dialog modal style */
.cssmodal.dialog figure {
    background: white;
    border-radius: 5px;
    padding-top: 10px;
}

/* Dialog modal h2 style */
.cssmodal.dialog figure h2 {
    margin-top: 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}

/* CSS Modal content when opened */
.cssmodal:target figure {
    opacity: 1;
}

/* style for small x link inside dialog modal */
.cssmodal.dialog .smallclose {
    text-decoration: none;
    position: absolute;
    right: 6px;
    top: 0px;
    font-size: 36px;
}

/* veil that covers page when CSS Modal is open */
.cssmodal .veil {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgba(0,0,0,.7);
    content: "";
    cursor: default;
    visibility: hidden;
    -webkit-transition: all .5s;
    transition: all .5s;
}

/* big "x" at the upper right corner inside veil */
.cssmodal .veil::before, .cssmodal .veil::after {
    content: "";
    display: block;
    position: fixed;
    width: 50px;
    height: 6;
    background: white;
    top: 50%;
    cursor: pointer;
    text-indent: -1000px;
    z-index: 10;
    top: 30px;
    right: 5px;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transition: all .5s;
    transition: all .5s;
}

/* veil style when CSS Modal is open */
.cssmodal:target .veil {
    visibility: visible;
}

/* animate veil "x"  when CSS Modal is open */
.cssmodal:target .veil::before, .cssmodal:target .veil::after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.cssmodal:target .veil::after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}


</style>

The HTML:

<a class="btn" href="#example1">Simple Modal</a>
<a class="btn" href="#example2">Modal Dialog</a>

<div class="cssmodal" id="example1">
   <a href="#/" class="veil"></a>
  <figure>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim, placerat id eleifend eu, semper vel sem. <a href="#/">Close Modal</a>
  </figure>
</div>

<div class="cssmodal dialog" id="example2">
  <a href="#/" class="veil"></a>
  <figure>
		<h2>CSS Only Modal <a href="#/" class="smallclose" aria-label="Close Modal Box">×</a></h2>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim, placerat id eleifend eu, semper vel sem.
  </figure>
</div>

Code Info

Rate this code:

Date Posted: 05/29/2017

Revision History: None

Usage Terms: Click here