Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://rawgithub.com/ai/autoprefixer-rails/master/vendor/autoprefixer.js"></script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style type="unprocessed" id="AutoprefixerIn">%css%</style>
<style id="AutoprefixerOut"></style>
<script>
AutoprefixerSettings = ""; //Specify here the browsers you want to target or leave empty
document.getElementById("AutoprefixerOut").innerHTML = autoprefixer(AutoprefixerSettings || null).process(document.getElementById("AutoprefixerIn").innerHTML).css;
</script>
</head>
<body>
  
  <div class="modal">
    <div class="overlay"></div>
    <div class="modal-view">
      <h1>I am a modal</h1>
    </div>
  </div>
​
</body>
</html>
 
body {
  background: #345
}
​
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.6) 100%);
  opacity: 0;
  transform: translateZ(0);
  z-index: 999;
​
  transition: opacity 200ms linear;
}
​
​
.modal {
  > .modal-view {
    transition: opacity 200ms linear,
                transform 600ms ease;
​
    opacity: 0;
    transform: translate3d(-50%, -50%,0) scale(0);
    z-index: 1000;
    background: #fff;
    border-radius: 8px;
    left: 50%;
    top: 50%;
    position: absolute;
    box-shadow: 0 0 15px rgba(0,0,0,0.25);
  }
​
  &.visible {
    > .overlay {
      opacity: 1;
    }
​
    > .modal-view {
      opacity: 1;
      transform: translate3d(-50%, -50%, 0) scale(1);
      transition: opacity 200ms linear,
                  transform 250ms cubic-bezier(0.4, 1.5, 0.5, 1.0);
    }
  }
}
​
 
setInterval(function(){
  $('.modal').toggleClass('visible');
}, 1000);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
jbtpro
0viewers