How to have social media button as caption in modal

Question

This is my code so far

(sorry please look at my code link for the full code that i have)

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

and what I want to happen is for the modal caption, in this case the 'Caption Hidden' to be like a social media button so something like this would appear underneath the modal image when clicked instead of the text caption.

Can someone please help me out? Thank you so much!

Answer 1

In order to add a social button instead of capture, you should change the value of captionText.innerHTML . Here is the solution for your problem. Hope, that I have understood you right.

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