Как иметь кнопки социальных медиа, как заголовок в модальной

Question

Это мой code до сих пор

(извините, пожалуйста, посмотрите на мой код ссылки на полный код, который я есть)

function handleImageClick(c){ 
     var modal = document.getElementById('myModal'); 
     var modalImg = document.getElementById("modalImage"); 
     var captionText = document.getElementById("caption"); 
     modal.style.display = "block"; 
     modalImg.src = c.nextElementSibling.src; 
     captionText.innerHTML = c.nextElementSibling.alt; 
} 

и что я хочу это произойдет для модального заголовка, в этом случае «Caption Hidden» будет напоминать кнопку в социальных сетях, так что что-то вроде этого появится под модальным изображением при нажатии вместо текстового заголовка.

Может кто-то пожалуйста, помогите мне? Спасибо огромное!

Answer 1

Чтобы добавить социальную кнопку вместо захвата, вы должны изменить значение captionText.innerHTML. Вот решение проблемы. Надеюсь, я понял тебя правильно.

function handleImageClick(c) { 
 
    var facebookShareUrl = "http://"+c.nextElementSibling.alt+".io"; 
 
    var twitterText = c.nextElementSibling.alt; 
 
    var twitterUrl = "http://"+c.nextElementSibling.alt+".io"; 
 
    var modal = document.getElementById('myModal'); 
 
    var modalImg = document.getElementById("modalImage"); 
 
    var captionText = document.getElementById("caption"); 
 
    modal.style.display = "block"; 
 
    modalImg.src = c.nextElementSibling.src; 
 
    captionText.innerHTML = 
 
    ` 
 
    <a class="resp-sharing-button__link" href="https://facebook.com/sharer/sharer.php?u=${facebookShareUrl}" target="_blank" aria-label="Share on Facebook"> 
 
     <div class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--large"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"> 
 
     <svg version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> 
 
      <g> 
 
      <path d="M18.768,7.465H14.5V5.56c0-0.896,0.594-1.105,1.012-1.105s2.988,0,2.988,0V0.513L14.171,0.5C10.244,0.5,9.5,3.438,9.5,5.32 v2.145h-3v4h3c0,5.212,0,12,0,12h5c0,0,0-6.85,0-12h3.851L18.768,7.465z"/> 
 
      </g> 
 
     </svg> 
 
     </div>Share on Facebook</div> 
 
    </a> 
 
    <a class="resp-sharing-button__link" href="https://twitter.com/intent/tweet/?text=${twitterText};url=${twitterUrl}" target="_blank" aria-label="Share on Twitter"> 
 
     <div class="resp-sharing-button resp-sharing-button--twitter resp-sharing-button--large"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"> 
 
     <svg version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> 
 
      <g> 
 
      <path d="M23.444,4.834c-0.814,0.363-1.5,0.375-2.228,0.016c0.938-0.562,0.981-0.957,1.32-2.019c-0.878,0.521-1.851,0.9-2.886,1.104 C18.823,3.053,17.642,2.5,16.335,2.5c-2.51,0-4.544,2.036-4.544,4.544c0,0.356,0.04,0.703,0.117,1.036 C8.132,7.891,4.783,6.082,2.542,3.332C2.151,4.003,1.927,4.784,1.927,5.617c0,1.577,0.803,2.967,2.021,3.782 C3.203,9.375,2.503,9.171,1.891,8.831C1.89,8.85,1.89,8.868,1.89,8.888c0,2.202,1.566,4.038,3.646,4.456 c-0.666,0.181-1.368,0.209-2.053,0.079c0.579,1.804,2.257,3.118,4.245,3.155C5.783,18.102,3.372,18.737,1,18.459 C3.012,19.748,5.399,20.5,7.966,20.5c8.358,0,12.928-6.924,12.928-12.929c0-0.198-0.003-0.393-0.012-0.588 C21.769,6.343,22.835,5.746,23.444,4.834z"/> 
 
      </g> 
 
     </svg> 
 
     </div>Share on Twitter</div> 
 
    </a> 
 
    `; 
 

 
}

div.polaroid { 
 
    width: 100%; 
 
    background-color: white; 
 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
 
    margin-bottom: 25px; 
 
} 
 

 
div.info { 
 
padding: 10px 20px; 
 
} 
 

 
/* The Modal (background) */ 
 
.modal { 
 
display: none; /* Hidden by default */ 
 
position: fixed; /* Stay in place */ 
 
z-index: 1; /* Sit on top */ 
 
padding-top: 100px; /* Location of the box */ 
 
left: 0; 
 
top: 0; 
 
width: 100%; /* Full width */ 
 
height: 100%; /* Full height */ 
 
overflow: auto; /* Enable scroll if needed */ 
 
background-color: rgb(0,0,0); /* Fallback color */ 
 
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ 
 
} 
 

 
/* Modal Content (Image) */ 
 
.modal-content { 
 
    margin: auto; 
 
    display: block; 
 
    width: 80%; 
 
    max-width: 700px; 
 
} 
 

 
/* Caption of Modal Image (Image Text) - Same Width as the Image */ 
 
#caption { 
 
    margin: auto; 
 
    display: block; 
 
    width: 80%; 
 
    max-width: 700px; 
 
    text-align: center; 
 
    color: #ccc; 
 
    padding: 10px 0; 
 
    height: 150px; 
 
} 
 

 
    /* Add Animation - Zoom in the Modal */ 
 
    .modal-content, #caption { 
 
    -webkit-animation-name: zoom; 
 
    -webkit-animation-duration: 0.6s; 
 
    animation-name: zoom; 
 
    animation-duration: 0.6s; 
 
    } 
 

 
    @-webkit-keyframes zoom { 
 
    from {-webkit-transform:scale(0)} 
 
    to {-webkit-transform:scale(1)} 
 
    } 
 

 
    @keyframes zoom { 
 
    from {transform:scale(0)} 
 
    to {transform:scale(1)} 
 
    } 
 

 
    /* The Close Button */ 
 
    .close { 
 
    position: absolute; 
 
    top: 35px; 
 
    right: 25px; 
 
    color: #ffffff; 
 
    font-size: 150px; 
 
    transition: 0.3s; 
 

 

 
    } 
 

 
    .close:hover, 
 
    .close:focus { 
 
     color: #bbb; 
 
     text-decoration: none; 
 
     cursor: pointer; 
 
    } 
 

 
    /* 100% Image Width on Smaller Screens */ 
 
    @media only screen and (max-width: 700px){ 
 
     .modal-content { 
 
      width: 100%; 
 
     } 
 
    } 
 
     
 
    .resp-sharing-button__link, 
 
.resp-sharing-button__icon { 
 
    display: inline-block 
 
} 
 

 
.resp-sharing-button__link { 
 
    text-decoration: none; 
 
    color: #fff; 
 
    margin: 0.5em 
 
} 
 

 
.resp-sharing-button { 
 
    border-radius: 5px; 
 
    transition: 25ms ease-out; 
 
    padding: 0.5em 0.75em; 
 
    font-family: Helvetica Neue,Helvetica,Arial,sans-serif 
 
} 
 

 
.resp-sharing-button__icon svg { 
 
    width: 1em; 
 
    height: 1em 
 
} 
 

 
.resp-sharing-button span { 
 
    padding-left: 0.4em 
 
} 
 

 
/* Non solid icons get a stroke */ 
 
.resp-sharing-button__icon { 
 
    stroke: #fff; 
 
    fill: none 
 
} 
 

 
/* Solid icons get a fill */ 
 
.resp-sharing-button__icon--solid, 
 
.resp-sharing-button__icon--solidcircle { 
 
    fill: #fff; 
 
    stroke: none 
 
} 
 

 
.resp-sharing-button--twitter { 
 
    background-color: #55acee 
 
} 
 

 
.resp-sharing-button--twitter:hover { 
 
    background-color: #2795e9 
 
} 
 

 
.resp-sharing-button--pinterest { 
 
    background-color: #bd081c 
 
} 
 

 
.resp-sharing-button--pinterest:hover { 
 
    background-color: #8c0615 
 
} 
 

 
.resp-sharing-button--facebook { 
 
    background-color: #3b5998 
 
} 
 

 
.resp-sharing-button--facebook:hover { 
 
    background-color: #2d4373 
 
} 
 

 
.resp-sharing-button--tumblr { 
 
    background-color: #35465C 
 
} 
 

 
.resp-sharing-button--tumblr:hover { 
 
    background-color: #222d3c 
 
} 
 

 
.resp-sharing-button--reddit { 
 
    background-color: #5f99cf 
 
} 
 

 
.resp-sharing-button--reddit:hover { 
 
    background-color: #3a80c1 
 
} 
 

 
.resp-sharing-button--google { 
 
    background-color: #dd4b39 
 
} 
 

 
.resp-sharing-button--google:hover { 
 
    background-color: #c23321 
 
} 
 

 
.resp-sharing-button--linkedin { 
 
    background-color: #0077b5 
 
} 
 

 
.resp-sharing-button--linkedin:hover { 
 
    background-color: #046293 
 
} 
 

 
.resp-sharing-button--email { 
 
    background-color: #777 
 
} 
 

 
.resp-sharing-button--email:hover { 
 
    background-color: #5e5e5e 
 
} 
 

 
.resp-sharing-button--xing { 
 
    background-color: #1a7576 
 
} 
 

 
.resp-sharing-button--xing:hover { 
 
    background-color: #114c4c 
 
} 
 

 
.resp-sharing-button--whatsapp { 
 
    background-color: #25D366 
 
} 
 

 
.resp-sharing-button--whatsapp:hover { 
 
    background-color: #1da851 
 
} 
 

 
.resp-sharing-button--facebook { 
 
    background-color: #3b5998; 
 
    border-color: #3b5998; 
 
} 
 

 
.resp-sharing-button--facebook:hover, 
 
.resp-sharing-button--facebook:active { 
 
    background-color: #2d4373; 
 
    border-color: #2d4373; 
 
} 
 

 
.resp-sharing-button--twitter { 
 
    background-color: #55acee; 
 
    border-color: #55acee; 
 
} 
 

 
.resp-sharing-button--twitter:hover, 
 
.resp-sharing-button--twitter:active { 
 
    background-color: #2795e9; 
 
    border-color: #2795e9; 
 
} 
 

 
.resp-sharing-button--google { 
 
    background-color: #dd4b39; 
 
    border-color: #dd4b39; 
 
} 
 

 
.resp-sharing-button--google:hover, 
 
.resp-sharing-button--google:active { 
 
    background-color: #c23321; 
 
    border-color: #c23321; 
 
}

<div class="row"> 
 
\t \t <div class="col-md-4 "> 
 
\t \t \t <div class="polaroid"> 
 
\t \t \t \t <img id="myImg" onClick="handleImageClick(this);" src="http://www.w3schools.com/howto/img_fjords.jpg" alt="Caption1" width="auto;" height="auto;"> 
 
\t \t \t \t <img id="showImage1" hidden src="http://www.w3schools.com/html/pic_mountain.jpg" alt="Caption1Hidden" /> 
 
\t \t \t \t <div class="info"> 
 
\t \t \t \t \t <p style="color:#971604; font-weight:bold;">This is a text.</p> 
 
\t \t \t \t \t <h4>Caption 1</h4> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
    </div> 
 

 
    <div class="col-md-4"> 
 
\t \t <div class="polaroid"> 
 
\t \t \t <img id="myImg2" onClick="handleImageClick(this);" src="http://www.w3schools.com/howto/img_fjords.jpg" alt="Caption2" width="auto;" height="auto;"> 
 
\t \t \t <img id="showImage2" hidden src="http://www.w3schools.com/html/pic_mountain.jpg" alt="Caption2Hidden" /> 
 
\t \t \t <div class="info"> 
 
\t \t \t \t <p style="color:#971604; font-weight:bold;">This is another text.</p> 
 
\t \t \t \t <h4>Caption 2</h4> 
 
\t \t \t </div> 
 
\t \t </div> 
 
    </div> 
 

 
    <div class="col-md-4"> 
 
     <div class="polaroid"> 
 
     <img id="myImg" onClick="handleImageClick(this);" src="http://www.w3schools.com/howto/img_fjords.jpg" alt="Caption3" width="auto;" height="auto"> 
 
\t \t <img id="showImage3" hidden src="http://www.w3schools.com/html/pic_mountain.jpg" alt="Caption3Hidden" /> 
 
     <div class="info"> 
 
      <p style="color:#971604; font-weight:bold;">This is the 3rd text.</p> 
 
      <h4>Caption 3</h4> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
    
 
    <div id="myModal" class="modal"> 
 
     <!-- The Close Button --> 
 
     <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span> 
 

 
     <!-- Modal Content (The Image) --> 
 
     <img class="modal-content" id="modalImage" src=""> 
 

 
     <!-- Modal Caption (Image Text) --> 
 
     <div id="caption"></div> 
 
</div>