html / css / js中的动画[重复]

Question

我希望在我的代码中弹出的模式能够单独为我拥有的按钮工作。例如，我有About Me 按钮和Projects 按钮。当用户单击About Me 按钮时，应该有一个单独的模态框弹出不同的文本，然后当用户单击Projects 按钮时，应该有一个不同的模态框弹出不同的文本。本质上，模式的设计应该是相同的，只是每个按钮应该有不同的文本。

代码：

function popUp_model(){
    const pop_up_model = document.getElementById('model');
 pop_up_model.classList.toggle('active');
}

body{
background: black;
}
.wrapper { display: flex; }

#container {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 100px;
    }
    .button {
      margin-top: 58px;
      align-content: left;
      --y: -25;
      --x: 0;
      --rotation: 0;
      --speed: 2;
      --padding: 1rem 1.25rem;
      cursor: pointer;
      padding: var(--padding);
      border: 4px solid;
      border-color: #00fffe;
      color: white; /* changed */
      font-weight: bold;
      font-size: 1.25rem;
      transition: background 0.1s ease;
      background: hsl(var(--grey), 100%, 50%);
              animation-name: flow-and-shake;
      -webkit-animation-duration: calc(var(--speed) * 1s);
              animation-duration: calc(var(--speed) * 1s);
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
      -webkit-animation-timing-function: ease-in-out;
              animation-timing-function: ease-in-out;
    }
  
    .button:hover {
      background: hsl(var(--grey), 100%, 40%);
      --speed: 0.1;
      --rotation: -1;
      --y: -1;
      --x: 1;
    }

    @-webkit-keyframes flow-and-shake {
      0%, 100% {
        transform: translate(calc(var(--x) * -1%), 0) rotate(calc(var(--rotation) * -1deg));
      }
      50% {
        transform: translate(calc(var(--x) * 1%), calc(var(--y) * 1%)) rotate(calc(var(--rotation) * 1deg));
      }
    }
    
    
    /* modal*/
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body1 {
  background: transparent;
  font-family: "Courier New", Courier, monospace;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.button {
  position: relative;
}

#model {
  position: absolute;
        z-index: 1;
  top: 50%;
  left: -100%;
  transform: translate(-50%, -50%);
  background: #101010;
  max-width: 450px;
  padding: 70px 50px;
  transition: 1s;
  visibility: hidden;
}
#model.active {
  visibility: visible;
  left: 50%;
}
#model .model-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#model .model-content img {
  width: 80px;
}
#model .model-content h2 {
  font-size: 24px;
  font-weight: 800;
  margin: 20px 0px;
}
.model-input {
  margin-top: 20px;
  width: 100%;
}
.model-input input {
  width: 100%;
  border: 1px solid;
  padding: 15px;
  outline: none;
  font-size: 18px;
}
.model-input input[type="submit"] {
  letter-spacing: 2px;
  cursor: pointer;
}
.model-input input[type="submit"]:hover {
  letter-spacing: 4px;
}
.close-model {
  position: absolute;
  top: 30px;
  right: 30px;
  cursor: pointer;
}
.close-model img {
  width: 20px;
}


/* modal 2*/

/* modal*/
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body2 {
  background: transparent;
  font-family: "Courier New", Courier, monospace;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.button1 {
  position: relative;
}
#subscribe-us1 {
  padding: 15px 20px;
  background: #000;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: 10px;
  outline: none;
  display: inline-block;
  font-weight: 600;
  cursor: pointer;
}
#subscribe-us1:hover {
  letter-spacing: 4px;
}
#model1 {
  position: absolute;
        z-index: 1;
  top: 50%;
  left: -100%;
  transform: translate(-50%, -50%);
  background: steelblue;
  max-width: 450px;
  padding: 70px 50px;
  transition: 1s;
  visibility: hidden;
}
#model1.active {
  visibility: visible;
  left: 50%;
}
#model1 .model-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#model1 .model-content img {
  width: 80px;
}
#model1 .model-content h2 {
  font-size: 24px;
  font-weight: 800;
  margin: 20px 0px;
}
.model-input1 {
  margin-top: 20px;
  width: 100%;
}
.model-input1 input {
  width: 100%;
  border: 1px solid #cccccc;
  padding: 15px;
  outline: none;
  font-size: 18px;
}
.model-input1 input[type="submit"] {
  letter-spacing: 2px;
  cursor: pointer;
}
.model-input1 input[type="submit"]:hover {
  letter-spacing: 4px;
}
.close-model1 {
  position: absolute;
  top: 30px;
  right: 30px;
  cursor: pointer;
}
.close-model1 img {
  width: 20px;
}

<div id="container">
<div class="button__wrap">
  <button class="button" style="--hue: 162.03381670949574" onclick="popUp_model()" >About me</button>
  </div>
<div class="button__wrap">
  <button class="button" style="--hue: 162.03381670949574" onclick="popUp_model()">My Projects</button>
  <div class="button__shadow"></div>
</div>
</div>



  <div id="model">
        <div class="model-content">
            <img src="https://image.shutterstock.com/image-vector/mail-icon-260nw-523869661.jpg" alt="Email">
            <h2>
                Join Our Newsletter
            </h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </p>
            <div class="model-input">
                <input type="email" placeholder="Enter Email">
            </div>
            <div class="model-input">
                <input type="submit" value="Sign Up">
            </div>
        </div>
        <a class="close-model" onclick="popUp_model()"><img src="https://cdn3.iconfinder.com/data/icons/pyconic-icons-1-2/512/close-512.png" alt="Close-model-icon"></a>
    </div>



  </div>
</div>

如您所见，两个按钮具有相同的模式和相同的文本。但我希望每个按钮的模式上有不同的文本。有什么建议吗？

预期输出

当用户单击About Me 时，应该会出现带有我在代码中发送的文本的模式。

当用户点击 Projects 时，模态框应该会出现一个不同的文本，比如“你好，这些是我的项目”。

注意：模态框的设计应该完全相同，唯一不同的是文本。

我尝试切换类的名称并使用不同的文本制作第二个模态框，但效果不佳，而且我得到了错误的输出。

有什么办法可以做到吗？

Answer 1

根据情况，有多种方法可以重用具有不同内容的相同模型。

一个简单的解决方案是将一些参数传递给popUp_model 函数。

function popUp_model(typeOfModel) {

  let aboutHTML = `
     <img src="https://image.shutterstock.com/image-vector/mail-icon-260nw-523869661.jpg" alt="Email">
    <h2>
      Join Our Newsletter
    </h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </p>
    <div class="model-input">
      <input type="email" placeholder="Enter Email">
    </div>
    <div class="model-input">
      <input type="submit" value="Sign Up">
    </div>
  `;

   let projectHTML = `
      
    <h2>
      My Projects
    </h2>
    <ul>
       <li>Project 1</li>
       <li>Project 2</li>
    </ul>
   `;
   
   if(typeOfModel == 0)
      document.getElementsByClassName("model-content")[0].innerHTML = aboutHTML;
   else 
      document.getElementsByClassName("model-content")[0].innerHTML = projectHTML;
   
  const pop_up_model = document.getElementById('model');
  pop_up_model.classList.toggle('active');
}

body {
  background: black;
}

.wrapper {
  display: flex;
}

#container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 100px;
}

.button {
  margin-top: 58px;
  align-content: left;
  --y: -25;
  --x: 0;
  --rotation: 0;
  --speed: 2;
  --padding: 1rem 1.25rem;
  cursor: pointer;
  padding: var(--padding);
  border: 4px solid;
  border-color: #00fffe;
  color: white;
  /* changed */
  font-weight: bold;
  font-size: 1.25rem;
  transition: background 0.1s ease;
  background: hsl(var(--grey), 100%, 50%);
  animation-name: flow-and-shake;
  -webkit-animation-duration: calc(var(--speed) * 1s);
  animation-duration: calc(var(--speed) * 1s);
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

.button:hover {
  background: hsl(var(--grey), 100%, 40%);
  --speed: 0.1;
  --rotation: -1;
  --y: -1;
  --x: 1;
}

@-webkit-keyframes flow-and-shake {
  0%,
  100% {
    transform: translate(calc(var(--x) * -1%), 0) rotate(calc(var(--rotation) * -1deg));
  }
  50% {
    transform: translate(calc(var(--x) * 1%), calc(var(--y) * 1%)) rotate(calc(var(--rotation) * 1deg));
  }
}


/* modal*/

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body1 {
  background: transparent;
  font-family: "Courier New", Courier, monospace;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.button {
  position: relative;
}

#model {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: -100%;
  transform: translate(-50%, -50%);
  background: #101010;
  max-width: 450px;
  padding: 70px 50px;
  transition: 1s;
  visibility: hidden;
}

#model.active {
  visibility: visible;
  left: 50%;
}

#model .model-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#model .model-content img {
  width: 80px;
}

#model .model-content h2 {
  font-size: 24px;
  font-weight: 800;
  margin: 20px 0px;
}

.model-input {
  margin-top: 20px;
  width: 100%;
}

.model-input input {
  width: 100%;
  border: 1px solid;
  padding: 15px;
  outline: none;
  font-size: 18px;
}

.model-input input[type="submit"] {
  letter-spacing: 2px;
  cursor: pointer;
}

.model-input input[type="submit"]:hover {
  letter-spacing: 4px;
}

.close-model {
  position: absolute;
  top: 30px;
  right: 30px;
  cursor: pointer;
}

.close-model img {
  width: 20px;
}


/* modal 2*/


/* modal*/

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body2 {
  background: transparent;
  font-family: "Courier New", Courier, monospace;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.button1 {
  position: relative;
}

#subscribe-us1 {
  padding: 15px 20px;
  background: #000;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: 10px;
  outline: none;
  display: inline-block;
  font-weight: 600;
  cursor: pointer;
}

#subscribe-us1:hover {
  letter-spacing: 4px;
}

#model1 {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: -100%;
  transform: translate(-50%, -50%);
  background: steelblue;
  max-width: 450px;
  padding: 70px 50px;
  transition: 1s;
  visibility: hidden;
}

#model1.active {
  visibility: visible;
  left: 50%;
}

#model1 .model-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#model1 .model-content img {
  width: 80px;
}

#model1 .model-content h2 {
  font-size: 24px;
  font-weight: 800;
  margin: 20px 0px;
}

.model-input1 {
  margin-top: 20px;
  width: 100%;
}

.model-input1 input {
  width: 100%;
  border: 1px solid #cccccc;
  padding: 15px;
  outline: none;
  font-size: 18px;
}

.model-input1 input[type="submit"] {
  letter-spacing: 2px;
  cursor: pointer;
}

.model-input1 input[type="submit"]:hover {
  letter-spacing: 4px;
}

.close-model1 {
  position: absolute;
  top: 30px;
  right: 30px;
  cursor: pointer;
}

.close-model1 img {
  width: 20px;
}

h2, p, li {
   color: white;
}

<div id="container">
  <div class="button__wrap">
    <button class="button" style="--hue: 162.03381670949574" onclick="popUp_model(0)">About me</button>
  </div>
  <div class="button__wrap">
    <button class="button" style="--hue: 162.03381670949574" onclick="popUp_model(1)">My Projects</button>
    <div class="button__shadow"></div>
  </div>
</div>



<div id="model">
  <div class="model-content">
    
  </div>
  <a class="close-model" onclick="popUp_model()"><img src="https://cdn3.iconfinder.com/data/icons/pyconic-icons-1-2/512/close-512.png" alt="Close-model-icon"></a>
</div>



</div>
</div>

Answer 2

您可以执行类似的操作来发送类型并根据类型在函数中设置文本。

function popUp_model(type){
  let changeTextEl = document.getElementById('change-text')
  if (type == 1) changeTextEl.innerHTML = 'Join Our Newsletter'
  if (type == 2) changeTextEl.innerHTML = 'Hello, these are my projects'
    const pop_up_model = document.getElementById('model');
 pop_up_model.classList.toggle('active');
}

body{
background: black;
}
.wrapper { display: flex; }

#container {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 100px;
    }
    .button {
      margin-top: 58px;
      align-content: left;
      --y: -25;
      --x: 0;
      --rotation: 0;
      --speed: 2;
      --padding: 1rem 1.25rem;
      cursor: pointer;
      padding: var(--padding);
      border: 4px solid;
      border-color: #00fffe;
      color: white; /* changed */
      font-weight: bold;
      font-size: 1.25rem;
      transition: background 0.1s ease;
      background: hsl(var(--grey), 100%, 50%);
              animation-name: flow-and-shake;
      -webkit-animation-duration: calc(var(--speed) * 1s);
              animation-duration: calc(var(--speed) * 1s);
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
      -webkit-animation-timing-function: ease-in-out;
              animation-timing-function: ease-in-out;
    }
  
    .button:hover {
      background: hsl(var(--grey), 100%, 40%);
      --speed: 0.1;
      --rotation: -1;
      --y: -1;
      --x: 1;
    }

    @-webkit-keyframes flow-and-shake {
      0%, 100% {
        transform: translate(calc(var(--x) * -1%), 0) rotate(calc(var(--rotation) * -1deg));
      }
      50% {
        transform: translate(calc(var(--x) * 1%), calc(var(--y) * 1%)) rotate(calc(var(--rotation) * 1deg));
      }
    }
    
    
    /* modal*/
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body1 {
  background: transparent;
  font-family: "Courier New", Courier, monospace;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.button {
  position: relative;
}

#model {
  position: absolute;
        z-index: 1;
  top: 50%;
  left: -100%;
  transform: translate(-50%, -50%);
  background: #101010;
  max-width: 450px;
  padding: 70px 50px;
  transition: 1s;
  visibility: hidden;
}
#model.active {
  visibility: visible;
  left: 50%;
}
#model .model-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#model .model-content img {
  width: 80px;
}
#model .model-content h2 {
  font-size: 24px;
  font-weight: 800;
  margin: 20px 0px;
}
.model-input {
  margin-top: 20px;
  width: 100%;
}
.model-input input {
  width: 100%;
  border: 1px solid;
  padding: 15px;
  outline: none;
  font-size: 18px;
}
.model-input input[type="submit"] {
  letter-spacing: 2px;
  cursor: pointer;
}
.model-input input[type="submit"]:hover {
  letter-spacing: 4px;
}
.close-model {
  position: absolute;
  top: 30px;
  right: 30px;
  cursor: pointer;
}
.close-model img {
  width: 20px;
}


/* modal 2*/

/* modal*/
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body2 {
  background: transparent;
  font-family: "Courier New", Courier, monospace;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.button1 {
  position: relative;
}
#subscribe-us1 {
  padding: 15px 20px;
  background: #000;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: 10px;
  outline: none;
  display: inline-block;
  font-weight: 600;
  cursor: pointer;
}
#subscribe-us1:hover {
  letter-spacing: 4px;
}
#model1 {
  position: absolute;
        z-index: 1;
  top: 50%;
  left: -100%;
  transform: translate(-50%, -50%);
  background: steelblue;
  max-width: 450px;
  padding: 70px 50px;
  transition: 1s;
  visibility: hidden;
}
#model1.active {
  visibility: visible;
  left: 50%;
}
#model1 .model-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#model1 .model-content img {
  width: 80px;
}
#model1 .model-content h2 {
  font-size: 24px;
  font-weight: 800;
  margin: 20px 0px;
}
.model-input1 {
  margin-top: 20px;
  width: 100%;
}
.model-input1 input {
  width: 100%;
  border: 1px solid #cccccc;
  padding: 15px;
  outline: none;
  font-size: 18px;
}
.model-input1 input[type="submit"] {
  letter-spacing: 2px;
  cursor: pointer;
}
.model-input1 input[type="submit"]:hover {
  letter-spacing: 4px;
}
.close-model1 {
  position: absolute;
  top: 30px;
  right: 30px;
  cursor: pointer;
}
.close-model1 img {
  width: 20px;
}

<div id="container">
<div class="button__wrap">
  <button class="button" style="--hue: 162.03381670949574" onclick="popUp_model(1)" >About me</button>
  </div>
<div class="button__wrap">
  <button class="button" style="--hue: 162.03381670949574" onclick="popUp_model(2)">My Projects</button>
  <div class="button__shadow"></div>
</div>
</div>



  <div id="model">
        <div class="model-content">
            <img src="https://image.shutterstock.com/image-vector/mail-icon-260nw-523869661.jpg" alt="Email">
            <h2 id="change-text">
                Join Our Newsletter
            </h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </p>
            <div class="model-input">
                <input type="email" placeholder="Enter Email">
            </div>
            <div class="model-input">
                <input type="submit" value="Sign Up">
            </div>
        </div>
        <a class="close-model" onclick="popUp_model()"><img src="https://cdn3.iconfinder.com/data/icons/pyconic-icons-1-2/512/close-512.png" alt="Close-model-icon"></a>
    </div>



  </div>
</div>