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>