модальное всплывающее окно с изображением и текстом - PullRequest
Новая
       53

модальное всплывающее окно с изображением и текстом

1 голос
/ 11 марта 2019

первое сообщение здесь, поэтому, пожалуйста, будьте осторожны; -)

У меня есть вопрос о всплывающих модалах, в которых есть не только изображение в модале, но и текст.Прикрепил мой текущий статус кодировки, однако не смог придумать простой способ получить текстовую подпись для каждого изображения.Всплывающие окна с изображением верны, однако возвращаемый текст - TEXT1 для любого нажатия кнопки.

Любая помощь будет оценена.Большое спасибо Сабс 

function onClick(element) {
	document.getElementById("modal01").style.display = "block";
	document.getElementById("img01").src = element.src;
	document.getElementsByClassName("modal-content").innerHTML = this.alt;
}
@import url('https://fonts.googleapis.com/css?family=Varela+Round');

html, body {
    overflow-x: hidden;
    /*height: 100%;*/
}

body {
    background: url('../img/dark.jpg');
    background-size: cover;
    padding: 0;
    margin: 0;
    font-family: 'Varela Round', sans-serif;
}

.main {
    margin: 0 auto;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr); 
    grid-gap: 5px;
    margin-top: 100px;
    margin-right: 2rem;
    margin-left: 2rem;
}

.mainInner img{
    width: 100%;
    object-fit: cover;
      /*display:inline-block;*/
}

/* ---------------- placement of images within our grid system -----*/
.mainInner:nth-child(1){ grid-column: span 1; grid-row: span 1; }
.mainInner:nth-child(2){ grid-column: span 1; grid-row: span 1; }
.mainInner:nth-child(3){ grid-column: span 1; grid-row: span 1; }

.mainInner:nth-child(1):hover, .mainInner:nth-child(2):hover, .mainInner:nth-child(3):hover{ 
    transform: scale(1.05);
    cursor: pointer;
    transition: .5s;
    opacity: 0.30;
}

/*----------------------- styling the modal ------------------------*/
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 60px; /* 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.8); /* Black w/ opacity */
  /*styling the caption text*/
  color: #f1f1f1;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

/* Modal Content */
.modal-content {
  margin: auto;
  display: block;
    /*position: absolute;*/
    /*transform: translate(-50%, -50%);*/
  width: 80%;
  max-width: 700px;
}

/* Add Animation */
.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: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

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

@media only screen and (max-width: 650px){
  .main{
        display: block;
    }
    .mainInner{
        margin-bottom: 1rem;
    }

  .modal-content {
    width: 100%;
  }
}

/*----------------- end modal styling -----------------*/
<!DOCTYPE html>
<html>

  <head>
    <title>Popup Modal Demo</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  </head>

  <body>

    <div class="main center">
      <div class="mainInner"><img id="myImg1" src="img/brands/AyalaBar.png" onclick="onClick(this)"></div>
      <div class="mainInner"><img id="myImg2" src="img/brands/BastianInverun.png" onclick="onClick(this)"></div>
      <div class="mainInner"><img id="myImg3" src="img/brands/breuning.png" onclick="onClick(this)"></div>
    </div>

    <!-- 1st IMAGE MODAL -->
    <div id="modal01" class="modal" onclick="this.style.display='none'">
      <div class="modal-content">
        <span class="close">&times;</span>
        <p>TEXT1</p>
        <img id="img01" style="max-width: 100%">
      </div>
    </div>

    <!-- 2nd IMAGE MODAL -->
    <div id="modal01" class="modal" onclick="this.style.display='none'">
      <div class="modal-content">
        <span class="close">&times;</span>
        <p>TEXT2</p>
        <img id="img01" style="max-width: 100%">
      </div>
    </div>

    <!-- 3rd IMAGE MODAL -->
    <div id="modal01" class="modal" onclick="this.style.display='none'">
      <div class="modal-content">
        <span class="close">&times;</span>
        <p>TEXT3</p>
        <img id="img01" style="max-width: 100%">
      </div>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="script2.js"></script>

  </body>

</html>
...