如何在模态中将社交媒体按钮作为标题

Question

到目前为止，这是我的代码

（对不起，请查看我的代码链接以获取我拥有的完整代码）

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

我想要发生的是模态标题，在这种情况下，“隐藏的标题”就像一个社交媒体按钮，所以当点击时，像这样的东西会出现在模态图像下方而不是文本标题。

有人可以帮我吗？ 非常感谢！

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"> <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>