Social Share Content Locker

index.html

<div id="sociallocker">
    <div id="sociallocker-links">
        <a href="https://facebook.com/100008152065270" class="social-1 fb"><i class="fab fa-facebook-f"></i></a>
        <a href="https://www.instagram.com/harunpehlivantebimtebitagem" class="social-1 tw"><i class="fab fa-instagram"></i></a>
        <a href="https://codepen.io/harunpehlivan" class="social-1 gp"><i class="fab fa-codepen"></i></a>
        <a href="https://www.linkedin.com/in/harun-pehlivan-0aa34252" class="social-1 in"><i class="fab fa-linkedin-in"></i></a>
        <a href="https://tr.pinterest.com/harunpehlivanit/" class="social-1 pi"><i class="fab fa-pinterest-p"></i></a>
       
    </div>
    <div id="sociallocker-content">
        <a href="https://hpitgroup.glitch.me/">Download Now</a>
    </div>
    <div id="sociallocker-overlay"><i class="fas fa-lock"></i>YOU CAN FOLLOW ME ON SOCIAL MEDIA</div>
</div>

script.js

(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();
        };
    });
})();

social-share-content-locker.markdown

Social Share Content Locker

A Pen by HARUN PEHLİVAN on CodePen.

License.

style.css

@import "https://use.fontawesome.com/releases/v5.0.10/css/all.css";
html, body {
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    padding: 10px;
    background: #f7f8f9;
}
#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; }