Responsive Explosive Modal On The Web | explodal

Explodal allows you to create a responsive and gorgeous modal window with an explosion effect using pure CSS.

css3 onclick animation examples, modal explosion effect html, css micro animations, css modal effects

Lightweight and Flexible JavaScript Modal Window Library | hystModal

How to make use of it:

1. Create a modal window by following the HTML markup like this:

<div id="explode" class="ui--modal explode">
  <div>
    <a href="#close" class="material-icons ui--close">Close</a>
    <h3 class="huge">Modal Title</h3>
    <p>Modal Content Here</p>
    <a href="#close" class="ui--button alt">Dismiss</a>
  </div>
  <div class="bg">
    <img src="assets/img/explode-med.gif" id="boooom">
  </div>  
</div>

2. Basic CSS styles for the modal window.

.ui--modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: all 260ms 260ms ease-in-out
}
@media screen and (max-width: 800px) {
.ui--modal { padding: 24px }
}
.ui--modal>div:first-child {
  position: relative;
  background: #fff;
  color: #575265;
  width: 100%;
  min-width: 320px;
  max-width: 580px;
  min-height: 320px;
  padding: 48px;
  box-shadow: 0px 15px 35px 15px rgba(0,0,0,0.2);
  opacity: 0;
  transform: scale(0.5);
  transition: all 260ms 0ms cubic-bezier(0.97, 0.33, 0, -.1)
}
.ui--modal .ui--close {
  position: absolute;
  top: 24px;
  right: 24px
}
.ui--modal p { margin-top: 0 }
.ui--modal .bg {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0px;
  width: 100vw;
  height: 100vh
}
.ui--modal .bg img {
  object-fit: cover;
  width: 100vw;
  height: 100vh
}
.ui--modal:target {
  opacity: 1;
  pointer-events: all;
  transition: all 260ms 0ms ease-in-out
}
.ui--modal:target>div {
  opacity: 1;
  transform: scale(1);
  transition: all 200ms 300ms cubic-bezier(0.97, 0.33, 0, -.1)
}

3. You need a play button to toggle the modal window.

<a href="#explode" onclick="document.getElementById('boooom').setAttribute('src', 'assets/img/explode-med.gif');">Toggle</a>

responsive explosive model, explodal Plugin/Github

See Demo And Download

Official Website(jessekorzan): Click Here

This superior jQuery/javascript plugin is developed by jessekorzan. For extra advanced usage, please go to the official website.