Question

在这里先发表文章，所以请保持柔和;-）

我有一个关于弹出模式的查询，不仅在模式内有图像，而且还有一些文本。附上我当前的编码状态，但是无法找出一种简单的方法来获取每个图像的文本标题。图像弹出窗口是正确的，但是无论单击哪个，返回的文本都是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>

Answer 1

我在这篇文章上有点晚了-欢迎来到萨布斯！首次发表带有清晰简洁问题并包含您相关代码的荣誉。

乍看之下，您总是返回“文本1”的原因是因为您的JS文件硬编码modal01作为每个模式的ID。因此，无论何时单击任何图像都将调用该函数，但该函数将始终显示该ID。

不过，您不必为模态弹出窗口重新发明JS和CSS-一种更简单的方法是使用Bootstrap。您仍然可以通过提供ID和类来将CSS和JS编辑到您的心脏内容，但是您不需要太多调用它。您需要包括源CSS / JS文件（为简单起见，此处为CDN）：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

从HTML调用模式会使用data-toggle和data-target：

<div class="main center">
      <div class="mainInner"><img id="myImg1" src="img/brands/AyalaBar.png" data-toggle="modal" data-target="#myModal1"></div>
      <div class="mainInner"><img id="myImg2" src="img/brands/BastianInverun.png" data-toggle="modal" data-target="#myModal2"></div>
      <div class="mainInner"><img id="myImg3" src="img/brands/breuning.png" data-toggle="modal" data-target="#myModal3"></div>
</div>

模态：

    <!-- Beginning Modal 1 -->
        <div class="modal fade" id="myModal1">
            <div class="modal-dialog">
                <div class="modal-content">

                    <!-- Modal Header -->
                    <div class="modal-header">
                        <h4 class="modal-title">Modal Heading 1</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- Modal body -->
                    <div class="modal-body">
                        <p>The first modal..</p>
                        <img src="img/brands/AyalaBar.png">
                    </div>

                    <!-- Modal footer -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    </div>

                </div>
            </div>
        </div>
    <!-- End Modal 1 -->

    <!-- Beginning Modal 2 -->
        <div class="modal fade" id="myModal2">
            <div class="modal-dialog">
                <div class="modal-content">

                    <!-- Modal Header -->
                    <div class="modal-header">
                        <h4 class="modal-title">Modal Heading 2</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- Modal body -->
                    <div class="modal-body">
                        <p>A second modal..</p>
                        <img src="img/brands/BastianInverun.png">
                    </div>

                    <!-- Modal footer -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    </div>

                </div>
            </div>
        </div>
    <!-- End Modal 2 -->

     <!-- Beginning Modal 3 -->
        <div class="modal fade" id="myModal3">
            <div class="modal-dialog">
                <div class="modal-content">

                    <!-- Modal Header -->
                    <div class="modal-header">
                        <h4 class="modal-title">Modal Heading 3</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- Modal body -->
                    <div class="modal-body">
                        <p>The third modal..</p>
                        <img src="img/brands/breuning.png">
                    </div>

                    <!-- Modal footer -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    </div>

                </div>
            </div>
        </div>
    <!-- End Modal 3 -->

带有图像和文本的弹出模式

1 个答案: