javascript - 如何在每个弹出窗口中有不同的文本

问题描述

我对编码非常陌生，正在尝试创建一个投资组合网站。

我使用了来自 W3 Schools 的弹出代码。这个想法是，当您单击每个小插图时，会出现一个带有文本的全屏弹出窗口。当您单击花朵时，我已经能够成功完成一个弹出窗口。

我的问题是，我现在不确定如何为每个带有不同文本的小插图制作弹出窗口。

我已将我的代码添加到这篇文章中，并在浏览器中添加了它的屏幕截图，以便您更好地了解它与插图的外观。网站截图在这里

任何帮助将不胜感激！我很困。

/* Open */
function openNav() {
    document.getElementById("popup").style.height = "100%";
  }
  
  /* Close */
  function closeNav() {
    document.getElementById("popup").style.height = "0%";
  }

/* Universal Styles */

body, html {
    width: 100%;
}

body {
    font-family: "Montserrat", "Helvetica", san-serif;
    color: white;
    background-color: #9486f2;
    font-weight: 300;
    font-size: 18px;  
}



/* Navigation */

a {
    color: white;
    text-decoration: none;
    font-size: 20px;
  }


a:hover {
    color:#adff2f;
    font-weight: 400;
    letter-spacing: 5px;
}


nav {
    text-align: right;
    padding-top: 30px;
    padding-right: 50px;
    float: right;
}


nav div {
    padding: 5px 0;    
}


/* Logo */

header img {
    height: 80px;
    padding-left: 50px;
    padding-top: 50px;    
}




/* Heart & Icons */

.container .rowtop {
    text-align: center;   
    
}


#flower {
    position: relative;
    right: 120px;  
    cursor: pointer;
    height: 100px;
}


#adobe {
    position: relative;
    left: 190px;  
}


.container .rowmiddle {
    text-align: center;   
    
}


#code {
    position: relative;
    bottom: 370px;
    right: 30px;  
}


#heart {
    position: relative;
    bottom: 60px;
    
}


#pudding {
    position: relative;
    bottom: 330px;
    left: 50px;  
}


.container .rowbottom {
    text-align: center;   
    
}


#certificate {
    position: relative;
    bottom: 210px;
    right: 120px;
}


#tv {
    position: relative;
    bottom: 200px;
    left: 190px;
}




/* Pop-Ups */


/* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */   
    height: 0;
    width: 100%;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    opacity: 0.95;
    background-color: #cc90ec; /* Black w/opacity */
    overflow-y: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
  }
  
  /* Position the content inside the overlay */
  .overlay-content {
    position: relative;
    top: 25%; /* 25% from the top */
    width: 40%; /* 100% width */
    text-align: left; /* Centered text/links */
    margin-top: 50px;
    font-size: 30px;
    line-height: 46px;
    margin: 0 auto;
  }
  
 
  
  /* When you mouse over the navigation links, change their color */
  .overlay a:hover, .overlay a:focus {
    color:#adff2f;
  }

 


  
  /* Position the close button (top right corner) */
  .overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
  }
  
 


/* Wavy Text */

.wavy
{
    position: relative;
    -webkit-box-reflect: below -12px linear-gradient(
        transparent, rgba(0,0,0,0.2));
}


.wavy span
{
    position: relative;
    display: inline-block;
    color: #adff2f;
    font-weight: 400;
    animation: animate 2s ease-in-out infinite;
    animation-delay: calc(0.1s * var(--i));
}


@keyframes animate
{
    0%
    {
        transform: translateY(0px);
    }
    10%
    {
        transform: translateY(-20px);
    }
    30%,100%
    {
        transform: translateY(0px);
    }
}








/* Footer */

h5 {
    font-family: "Montserrat", "Helvetica", san-serif;
    color: white;
    font-weight: 200;
    font-size: 14px;
}


footer {

    padding-left: 50px;
    position: relative;
    bottom: 30px;   
}

<!DOCTYPE html>
<html>
    <head>
        <title>Dom Pooley</title>
        <script src="main.js" ></script>
        <link rel="stylesheet" href="/Users/dominiquepooley/Documents/03_Dom Personal/05_Portfolio/Portfolio 2020/Portfolio2020/resources/css/style.css" type="text/css" />
        <link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,200;0,300;0,400;0,700;1,200;1,300;1,400;1,700&display=swap" rel="stylesheet">
    </head>
    

<!-- Header -->
    <body>
        <header class="flex-container">
            <img src="/Users/dominiquepooley/Documents/03_Dom Personal/05_Portfolio/Portfolio 2020/Portfolio2020/resources/images/DomPooley_Logo_01.png"">
        <nav>
            <div><a href= "./about.html">About</a></div>
            <div><a href= "./work.html">Work</a></div>
            <div><a href= "./contact.html">Contact</a></div>
        </nav>
        </header>






<!-- Heart and Icons -->
      <div class="container">
        <div class="rowtop">
          <img id="flower" src="resources/images/Pansy_01.png" onmouseover="this.src='resources/images/Pansy_02.png' " onmouseout="this.src='resources/images/Pansy_01.png'" onClick="openNav()">
          <img src="resources/images/Adobe_01.gif" id="adobe" alt="" height="120">
        </div>
        <div class="rowmiddle">
          <img src="resources/images/Code_01.gif" onmouseover="this.src='resources/images/Code_02.png' " onmouseout="this.src='resources/images/Code_01.gif'" id="code" alt="" height="40">
          <img id="heart" height="500" src="resources/images/Dom_Heart_01.png" onmouseover="this.src='resources/images/Dom_Heart_02.png' " onmouseout="this.src='resources/images/Dom_Heart_01.png'"/>
          <img src="resources/images/Pudding_01.gif" id="pudding" alt="" height="120">
        </div>
        <div class="rowbottom">
          <img src="resources/images/Certificate_01.gif" id="certificate" alt="" height="100">
          <img src="resources/images/TV_01.gif" id="tv" alt="" height="110">
        </div>
      </div>





<!-- Pop-Ups -->

<!-- The Overlay -->
<div id="popup" class="overlay">

  <!-- Button to close the overlay navigation -->
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

  <!-- Overlay content -->
  <div id="flowerpop" class="overlay-content">
    <p>Thanks to COVID-19, I now have a new hobby -I have been growing, picking, pressing and coating flowers in resin to make jewellery. I would include a photo but they still have that "primary school project vibe"... 
      <br><div class="wavy">
        <span style="--i:1;">*</span>
        <span style="--i:2;">W</span>
        <span style="--i:3;">a</span>
        <span style="--i:4;">t</span>
        <span style="--i:5;">c</span>
        <span style="--i:6;">h</span>
        <span style="--i:7;"> </span>
        <span style="--i:8;">t</span>
        <span style="--i:9;">h</span>
        <span style="--i:10;">i</span>
        <span style="--i:11;">s</span>
        <span style="--i:12;"> </span>
        <span style="--i:13;">s</span>
        <span style="--i:14;">p</span>
        <span style="--i:15;">a</span>
        <span style="--i:16;">c</span>
        <span style="--i:17;">e</span>
        <span style="--i:18;">*</span>
    </div></br></p>
  </div>
</div>






 <!-- Footer Section -->   
 <footer>
  <h5>Copyright Dominique Pooley 2020</h5>
</footer>    
    </body>
</html>

标签： javascripthtmlcsspopup

javascript - 如何在每个弹出窗口中有不同的文本

问题描述

解决方案

推荐阅读