@import "https://use.fontawesome.com/releases/v5.0.10/css/all.css";
#sociallocker {
background-color: #EEEEEE;
text-align: center;
position: relative;
max-width: 500px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius:10px;
}
#sociallocker-overlay {
background-color: rgba(0,0,0,0.6);
font-size: 20px;
font-weight: bold;
color: #ffffff;
transition: all 0.2s ease;
}
#sociallocker-overlay i {
margin-right: 10px;
}
#sociallocker:hover #sociallocker-overlay {
top: -100%;
transition: all 0.2s linear;
}
#sociallocker:hover #sociallocker-content {
top: 100%;
transition: all 0.2s linear;
}
#sociallocker-content a {
display: inline-block;
text-decoration: none;
padding: 10px 20px;
background-color: #777777;
color: #f9f9f9;
border-radius: 4px;
font-weight: bold;
}
#sociallocker-overlay,
#sociallocker-content,
#sociallocker-links {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
top: 0;
left: 0;
}
#sociallocker-content {
background-color: #ccc;
transition: all 0.2s ease;
}
.social-1 {
text-decoration: none;
color: #ffffff;
display: inline-block;
width: 60px;
height: 60px;
overflow: hidden;
margin-right: 5px;
}
.social-1 i {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.social-1:hover i {
background-color: rgba(0,0,0,0.1);
transform: scale(1.2);
transition: all 0.2s;
}
.fb { background-color: #4561A8; }
.tw { background-color: #17ADEA; }
.gp { background-color: #BF3B28; }
.in { background-color: #1679B1; }
.pi { background-color: #D9303C; }
.su { background-color: #E84930; }
(function() {
var sl = document.querySelector("#sociallocker");
var slc = document.querySelector("#sociallocker-content");
if (!sl) return;
var old_slc_html = slc.innerHTML;
slc.innerHTML = slc.innerHTML.replace(/(href=")(.*)(\")/g, "href=\"#\"");
sl.querySelectorAll("#sociallocker-links a").forEach(function(ele) {
ele.onclick = function(e) {
var web_window = window.open(this.href, 'Share Link', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600,top=' + (screen.height/2 - 300) + ',left=' + (screen.width/2 - 300));
var check_window_close = setInterval(function() {
if (web_window.closed) {
clearInterval(check_window_close);
slc.innerHTML = old_slc_html;
document.querySelector("#sociallocker-links").style.display = "none";
document.querySelector("#sociallocker-overlay").style.display = "none";
document.querySelector("#sociallocker-content").style.top = "0";
}
}, 1000);
e.preventDefault();
};
});
})();
0 comments:
Catat Ulasan