13.07.2017 Шаблоны (TPL), Стили (CSS), jQuery 922
<style>
.sociallinks {
display: none;
position: fixed;
z-index: 999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
.sociallinks-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 500px;
border-radius: 10px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.close {
color: #aaa;
position: absolute;
top: 10px;
right: 10px;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.social-container {
display: flex;
align-items: center;
}
.social-container > div {
margin-left: 10px;
}
h2, p {
margin: 5px 0;
}
.social {
padding-top: 20px;
}
.social img {
margin: 10px;
}
.sharebtn {
padding-top: 20px;
width: 100%;
}
.sharebtn_area {
border: 1px solid black;
height: 40px;
}
.sharebtn input[type="text"] {
width: 70%;
border: none;
height: 95%;
}
.sharebtn button {
width: 25%;
height: 95%;
border: none;
background-color: #fff;
}
</style>
<button id="opensociallinksBtn">Поделиться</button>
<div id="mysociallinks" class="sociallinks">
<div class="sociallinks-content">
<span class="close">×</span>
<div class="social-container">
<img src="{image-1}" alt="Icon" width="30" height="30">
<div>
<h2>{title}</h2>
<p>Поделиться</p>
</div>
</div>
<div class="social">
<a href="https://api.whatsapp.com/send/?text={full-link}"><img src="whatsapp.png" alt="WhatsApp" width="30" height="30"></a>
<a href="https://www.facebook.com/sharer/sharer.php?u={full-link}"><img src="facebook.png" alt="Facebook" width="30" height="30"></a>
<a href="https://twitter.com/intent/post?url={full-link}"><img src="twitter.png" alt="Twitter" width="30" height="30"></a>
<a href="https://www.instagram.com/share?url={full-link}"><img src="instagram.png" alt="Instagram" width="30" height="30"></a>
</div>
<div class="sharebtn">
<div class="sharebtn_area">
<input type="text" id="inputText" value="{full-link}" readonly="true">
<button id="copyBtn">Поделиться <img src="share.png" width="10px" alt="Share Icon"></button>
</div>
</div>
</div>
</div>
<script>
var sociallinks = document.getElementById("mysociallinks");
var opensociallinksBtn = document.getElementById("opensociallinksBtn");
var closeBtn = document.getElementsByClassName("close")[0];
var copyBtn = document.getElementById("copyBtn");
var inputText = document.getElementById("inputText");
opensociallinksBtn.onclick = function() {
sociallinks.style.display = "block";
}
closeBtn.onclick = function() {
sociallinks.style.display = "none";
}
window.onclick = function(event) {
if (event.target == sociallinks) {
sociallinks.style.display = "none";
}
}
copyBtn.onclick = function() {
inputText.select();
document.execCommand("copy");
}
</script>
