Авторизуйтесь по паролю
Или через соцсеть
ufh2 07.05.2014 Все вопросы » Стили (CSS) 2189
[comments]
[/comments]
Twelvee - 2014-07-147 мая 2014 16:13 - #28304
ufh2 - 2014-07-147 мая 2014 18:13 - #28310
Frak - 2014-07-147 мая 2014 20:40 - #28318
futbik - 2014-07-147 мая 2014 22:39 - #28330
ufh2 - 2014-07-148 мая 2014 00:22 - #28337
FastFud - 2014-07-148 мая 2014 00:42 - #28339
<div class="clr"></div>
.clr {clear: both;}
ufh2 - 2014-07-148 мая 2014 00:52 - #28340
FastFud - 2014-07-148 мая 2014 00:53 - #28341
ufh2 - 2014-07-148 мая 2014 00:57 - #28342
<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>