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

ProgramBox

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

Post author:admin
Запись опубликована:4 февраля, 2023
Post category:Вопросы по программированию

#javascript #html #css #twitter-bootstrap #bootstrap-modal

#javascript #HTML #css #twitter-bootstrap #bootstrap-модальный

Вопрос:

Пока это мой код

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

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

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

Может кто-нибудь, пожалуйста, помочь мне? Большое вам спасибо!

Ответ №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'">amp;times;</span>

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

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

1. Большое вам за это спасибо!!

2. здравствуйте, спасибо за вашу помощь! когда я попытался нажать кнопку facebook, она открывается, а затем закрывается, и у меня нет возможности нажать кнопку «Поделиться». Можете ли вы указать мне на ту часть, где должны быть внесены изменения? Большое спасибо!