Creating Simple Modal Windows with kbModal.js

Preview:

Description:

In this post we’re going to create a simple & basic modal window based on javascript and CSS3 transitions that slide out from top of the page. Click the ‘x’ button or blank area of the overlay will close the modal window. Works nicely with modern browsers and even old IE browsers like IE 6/7/8/9.

Basic Usage:

Load the kbModal.js script in the html document.

<script src="kbModal.js"></script>

The basic CSS to style and animate the modal window.

@media screen and (max-width: 767px) {
.dkKbModalDialog {
width: auto;
margin: 5px;
}
}
@media screen and (min-width: 768px) {
.dkKbModalDialog {
width: 744px;
margin: 30px auto;
}
}
.dkKbModalOpen {
overflow: hidden;
}
.dkKbModalOverlay {
position: fixed;
z-index: 9000;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #000;
}
.dkKbModalOverlay.dkKbFade {
opacity: 0;
-webkit-transition: opacity 150ms linear;
-moz-transition: opacity 150ms linear;
-o-transition: opacity 150ms linear;
transition: opacity 150ms linear;
filter: alpha(opacity=0); /* IE8 */
}
.dkKbModalOverlay.dkKbShown {
opacity: .8;
filter: alpha(opacity=80); /* IE8 */
}
.dkKbModalOuterContainer {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 9010;
overflow: auto;
display: none;
}
.dkKbModalContainer {
box-sizing: border-box;
}
.dkKbModalContainer .dkKbModalDialog {
z-index: 9900;
}
.dkKbModalContainer.dkKbFade {
opacity: 0;
-webkit-transition: opacity 150ms linear;
-moz-transition: opacity 150ms linear;
-o-transition: opacity 150ms linear;
transition: opacity 150ms linear;
filter: alpha(opacity=0); /* IE8 */
}
.dkKbModalContainer.dkKbShown {
opacity: 1;
}
.dkKbModalDialog {
position: relative;
background-color: #eee;
border: 1px solid #000;
border-radius: 5px;
padding: 10px;
}
.dkKbModalHeader {
margin-top: .5em;
}
.dkKbModalBody {
overflow: auto;
}
.dkKbModalContainer.dkKbFade .dkKbModalDialog {
-webkit-transform: translate(0, -25%);
-ms-transform: translate(0, -25%);
transform: translate(0, -25%);
-webkit-transition: -webkit-transform 300ms ease-out;
-moz-transition: -moz-transform 300ms ease-out;
-o-transition: -o-transform 300ms ease-out;
transition: transform 300ms ease-out;
}
.dkKbModalContainer.dkKbShown .dkKbModalDialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
.dkKbCloseButton {
float: right;
margin: 10px;
margin-top: -2px;
cursor: pointer;
font-size: 120%;
-webkit-appearance: none;
border: 0;
color: #000;
opacity: .2;
 filter:alpha(opacity:50);
background: transparent;
font-weight: bold;
}

Create a button to toggle a modal window.

<button class="dkKbTurnOnModal">Click me!</button>