Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы » Как реализовать кнопку "Поделиться" как на Плей Маркете?

Как реализовать кнопку "Поделиться" как на Плей Маркете?


     17.04.2024    Общие вопросы, jQuery    265

вопрос
Подскажите, пожалуйста, как реализовать подобный функционал для кнопки "Поделиться" на ПК (https://disk.yandex.ru/d/ACozrjpCW2RyIA, https://disk.yandex.ru/d/VMBKzcdXpxIE4Q) и мобильной версии (https://disk.yandex.ru/d/dk4YbT32VMh6Ig, https://disk.yandex.ru/d/28q6mHHHxufDZw)?

Ответа пока нет


3 комментария

derebas
Юзер

derebas - 18 апреля 2024 09:39 -

Ну если на скорую руку то примерно так
<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>

Akvamary
Юзер

Akvamary - 1 мая 2024 11:59 -

Сможете реализовать за оплату на нашем сайте функционал для кнопки "Поделиться" https://disk.yandex.ru/d/xgwCtR7PlVIcqg как сделано на сайте https://androeed.ru/files/pilgrims-piligrimi.html ? Чтобы при клике на кнопку в ПК-версии сайта появлялось такое окно для пользователей https://disk.yandex.ru/d/9t_5ERHGVoTKFw , а в мобильной версии так https://disk.yandex.ru/i/rkRLfItrceJo6A .

kinetoon
Юзер

kinetoon - 31 мая 2024 16:08 -

Я могу помочь

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх