nakome
5/15/2014 - 1:20 PM

A Pen by Moncho Varela.

A Pen by Moncho Varela.



/* Modal 
-----------------------*/
.myModal {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  padding:0;
  visibility:hidden;
  opacity:0;
  transition:all 0.5s ease;
}
.myModal_show {
  opacity:1;
  visibility:visible;
  transition:all 0.5s ease;
}
.myModal_close {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  display: inline-block;
  padding: 2px 6px;
  text-decoration: none;
  font-family: sans-serif,cursive;
  font-weight: 400;
  font-size: 15px;
  background: #3498DB;
  color: #ECF0F1;
  transition: all 0.5s ease;
}
.myModal_close:hover {
  background: #ECF0F1;
  color: #3498DB;
  transition: all 0.5s ease;
}
.myModal_content {
  display:block;
  margin-top:20px;
  padding:15px;
}
.myModal_inner {
  position: absolute;
  left: 0;
  top: -1000px;
  right: 0;
  margin: auto;
  padding: 0;
  width: 400px;
  min-height:100px;
  background: #FFF;
  border: 1px solid #E9E9E9;
  color: #7F8C8D;
  transition: all 1s ease;
  box-shadow: 0 6px 6px -6px #000;
  border-radius: 3px;
}
.myModal_inner img{
  display:block;
  max-width:100%;
}
.myModal_success {
  top:20%;
  transition:top 1s ease;
}
.myModal_error{
  top:20%;
  transition:top 1s ease;
  background: #E74C3C;
  border-color: #C0392B;
  color: #ECF0F1;
}
/* = @media queries   
===========================*/
@media (min-width: 980px){
  .myModal_inner {width:350px;}}
@media (min-width: 768px) and (max-width: 979px) {
  .myModal_inner {width:350px;}}
@media (max-width: 767px) { 
  .myModal_inner {width:300px;}}
@media (max-width: 480px) { 
  .myModal_inner {width:235px;}}















/* Demo
-------------------------*/
*,*:after,*:before{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}::-webkit-scrollbar{width: 0.2em}a{text-decoration: underline;-webkit-transition: 0.25s;transition: 0.25s;-webkit-backface-visibility: hidden;-ms-backface-visibility: hidden;backface-visibility: hidden}a:hover{text-decoration: none}a:focus{outline: 0;outline: 0 auto -webkit-focus-ring-color;outline-offset: 0}p{margin: 0 0 1em}img,object,video{max-width: 100%;border: 0}a img{border: 0;outline: 0}h1{font-size: 3em;line-height: 1;letter-spacing: -0.02em;margin-bottom: 0.2em}h2{font-size: 2em;line-height: 1.1;margin-bottom: 0.2em}h3{font-weight: normal;line-height: 1.1;padding-bottom: 0.4em}h1 a,h2 a,h3 a{display: block}blockquote{border-left: 0.5em solid #c0392b;padding-left: 1em;margin-left: 1em}body{-webkit-background-size: cover;background-size: cover;min-height: 100%;line-height: 1.5em;font-size: 14px;font-family: 'Montserrat', 'sans-serif';font-weight: normal}body:before{content: "";width: 100%;height: 100%;position: absolute;z-index: -99999999}.wrapper{max-width: 70em;margin: 0 auto;padding: 0 1em;overflow: hidden}.wrapper:before{content: "";display: table}input[type="text"],input[type="password"]{line-height: normal;border: 1px solid #2C3E50;display: block;width: 98%;padding: 5px 2px;background: #34495E;color: #ECF0F1}input[type="submit"]{line-height: normal;border: 1px solid #2C3E50;display: inline-block;padding: 5px 10px;background: #4D4D4D;color: #ECF0F1}input[type="submit"]:hover{border: 1px solid #C0392B;background: #E74C3C;color: #ECF0F1;outline:none}ul{list-style:none;margin:0;padding:0;}


var myModal = (function() {
  'use-strict';
  return {
    // Basic options
    options:{
      'success':'Operation performed successfully',
      'error':'There has been an error, try again'
    },
    // qS(class)
    qS: function(el) {
      return document.querySelector(el);
    },
    // event handler
    close: function(el) {
      var slf = this,
          cl = this.qS('.myModal_close');
      cl.addEventListener('click', function() {
        slf.qS('.myModal').classList.remove('myModal_show');
        slf.qS('.myModal_inner').classList.remove(el);
        slf.tmpl('');
      }, false);
      return el;
    },
    success:function(sc){
      var s = sc,self = this,
          inn = this.qS('.myModal_inner');
      // if not custom text show options text
      if (typeof sc === 'undefined') {
        s = self.options.success;}
      // if contains class
      if(inn.classList.contains('myModal_error')){
        inn.classList.remove('myModal_error');
        // wait 1s and show
        var t = setTimeout(function(){
          self.qS('.myModal').classList.add('myModal_show');
          inn.classList.add('myModal_success');
          clearTimeout(t);
        },1000);
      }else if(inn.classList.contains('myModal_success')){
        inn.classList.remove('myModal_success');
        // wait 1s and show
        var t = setTimeout(function(){
          self.qS('.myModal').classList.add('myModal_show');
          inn.classList.add('myModal_success');
          clearTimeout(t);
        },1000);
      }else{
          this.qS('.myModal').classList.add('myModal_show');
          inn.classList.add('myModal_success');
      }
      // close modal success
      this.close('myModal_success');
      // show text
      this.tmpl(s);
    },
    error:function(er){
      var e = er,
          self = this,
          inn = this.qS('.myModal_inner');
      if (typeof er === 'undefined') {
        e = self.options.error;}
      if(inn.classList.contains('myModal_success')){
        inn.classList.remove('myModal_success');
        var t = setTimeout(function(){
          self.qS('.myModal').classList.add('myModal_show');
          inn.classList.add('myModal_error');
          clearTimeout(t);
        },1000);
      }else if(inn.classList.contains('myModal_error')){
        inn.classList.remove('myModal_error');
        var t2 = setTimeout(function(){
          self.qS('.myModal').classList.add('myModal_show');
          inn.classList.add('myModal_error');
          clearTimeout(t2);
        },1000);
      }else{
          this.qS('.myModal').classList.add('myModal_show');
          inn.classList.add('myModal_error');        
      }
      this.close('myModal_error');
      this.tmpl(e);       
    },
    // this.tmpl(element);
    tmpl: function(e) {
      this.qS('.myModal_content').innerHTML = e;
      return e;
    }
  }
})();


// Demos with jquery ( you can use javascript )
// demo success
$('.success').on('click',function(){
  myModal.success(); 
});

// demo error
$('.error').on('click',function(){
  myModal.error(); 
});

// demo success
$('.custom').on('click',function(){
  myModal.success('<p>Change for error <a href="#" onclick="myModal.error(\'And other popup\');" title="">popup</a></p>');  
});


// demo success
$('.image').on('click',function(){
  myModal.success('<h3>This is a image</h3><img src="http://tinyurl.com/pmmman6"/>'); 
});

// demo login
$('.login').on('click',function(){
  var html = '<form action="#"><p><label>Name</label><br><input type="text" name="name"></p><p><label>Password</label><br><input type="password" name="password"></p><p><input type="submit" name="submit" value="submit" onclick="myModal.success()"></p></form>';
  myModal.success(html); 
});

// demo various
$('.various').on('click',function(){
    myModal.success('<p>Start here <a href="#" onclick="return various()" title="">Click me</a></p>');
});

var various = function(){
   myModal.success('This is the first Success');
    setTimeout(function(){
    myModal.success('The seccond Success');},3000);
  setTimeout(function(){
    myModal.error('The third Error');},6000);
  setTimeout(function(){
    myModal.success('Another Success');},9000);
 var f = setTimeout(function(){
   myModal.success('And finish Close this');
   clearTimeout(f);},12000);
}

<div class="wrapper">

  <div class="wrapper_inner">
    <h2>Very Simply Modal</h2>
     <ul>
      <li>Demo <a href="#" class="success">Success </a></li>
      <li>Demo <a href="#" class="error">Error</a></li>
      <li>Demo <a href="#" class="custom">Custom Success</a></li>
      <li>Demo <a href="#" class="image">Image Success</a></li>
      <li>Demo <a href="#" class="login">Login Success</a></li>
      <li>Demo <a href="#" class="various">Divers Success and Error</a></li>
    </ul>  
  
  </div>

</div>


<!-- overlay -->
<div class="myModal">
  <!-- modal -->
  <div class="myModal_inner">
    <!-- close btn -->
    <a href="#" class="myModal_close">X</a>
    <div class="myModal_content">
      <!-- contents goes here -->
    </div>
  </div>
</div>