Skip to content

Instantly share code, notes, and snippets.

@rbarros
Created May 10, 2012 21:36
Show Gist options
  • Save rbarros/2656055 to your computer and use it in GitHub Desktop.
Save rbarros/2656055 to your computer and use it in GitHub Desktop.
Inserir popup dinamicamente com javascript
/**
* Popup javascript sem depender do jQuery
*
*/
var popup = {
img:'', // new Array()
img_close:'popup/close2.png',
style:'', //new Array(),
config:function(){
var div = document.createElement("div");
div.setAttribute("class", "popup_container");
div.setAttribute("id", "popup");
div.innerHTML =
'<div class="popup" align="center">'+
'<img class="close" src="'+ this.img_close +'" alt="close" onclick="popup.fadeOut(\'popup\',0.1);" />'+
'<img src="'+ this.img +'" alt="popup"/>'+
'</div>';
document.body.insertBefore(div,document.body.firstChild);
},
fadeIn:function(id, time) {
target = document.getElementById(id);
alpha = 0;
timer = (time*1000)/50;
var i = setInterval(
function() {
if (alpha >= 100)
clearInterval(i);
popup.setAlpha(target, alpha);
alpha += 2;
}, timer);
},
fadeOut:function(id, time) {
target = document.getElementById(id);
alpha = 100;
timer = (time*1000)/50;
var i = setInterval(
function() {
if (alpha <= 0)
clearInterval(i);
popup.setAlpha(target, alpha);
alpha -= 2;
if(alpha==0){
target.parentNode.removeChild(target);
}
}, timer);
},
setAlpha:function(target, alpha) {
target.style.filter = "alpha(opacity="+ alpha +")";
target.style.opacity = alpha/100;
},
setup:function(img) {
popup.img = img;
popup.config();
popup.fadeIn('popup',0.1);
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment