如何多次重用相同的代码 - html/css

Question

我想为每个按钮重复使用模态两次。

按钮代码：

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;
      /* REMOVED: --txt: "About Me"; */
      --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;
}

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

对于上述每个按钮，我希望模态显示在点击时。

我想要两次模态。一个用于About Me 按钮，然后一个用于Projects 按钮。 About Me 按钮模式应该与Projects 按钮不同，因为我应该能够为每个模式添加不同的文本。关于如何重复使用模态代码两次的任何建议？

Answer 1

使用循环遍历您的 打开模式 按钮元素。使用该类来选择它们，然后在事件侦听器中遍历每一个。这可以使用querySelectorAll() 方法来选择打开模式（您的按钮） 的元素和forEach 循环来遍历按钮元素。在forEach 循环中使用 value 和 key 来处理与按钮 @ 配对的模态元素987654324@.

button.forEach((btn, i)=>{ 
   btn.addEventListener(()=>{
      modal[i].style.display = 'block';
      // the rest of the modal open code would go here 
   }) 
}).

这将使用key 值i 用于由事件侦听器触发的元素的迭代。根据您设置模态代码的方式，代码会有所不同...无论您是创建元素还是使用 CSS 使它们可见...

以下是使用模态类型对象及其内容创建元素的代码示例。您的问题的关键是如何在每个函数上使用一个函数......嵌入事件侦听器的 forEach 循环可以解决问题modalBtn.forEach((el, i) => openModal(el, i));。在 openModal 函数中有一个事件监听器，它接受循环 value 和 key 的参数。

const modals = {
  0: {
    type: 'text',
    buttonName: 'First Modal',
    header: "Header for the First Modal",
    footer: "Footer for the first modal",
    content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Est tempora, tenetur temporibus voluptatem quaerat facere sapiente quod aliquid veniam culpa itaque eius quibusdam vitae beatae magnam repellendus laborum molestias a.'
  },
  1: {
    type: 'image',
    buttonName: '1st Image',
    header: false,
    footer: 'This is a brief explaination of the image.',
    content: 'http://3.imimg.com/data3/VL/AV/MY-1921873/noida-authority-building-noida-uttar-pradesh-india-500x500.jpg'
  },
  2: {
    type: 'image',
    buttonName: '2nd Image',
    header: false,
    footer: 'This is another brief explaination of the image.',
    content: 'http://3.bp.blogspot.com/-I6NbACJixe4/TcQiPSDyXMI/AAAAAAAAAAo/7rFILVJI5sI/s1600/paisagens-naturais-brasil-2.jpg'
  },
  3: {
    type: 'text',
    buttonName: 'Fourth Modal',
    header: "This is the fourth Modal",
    footer: "This is the footer for the fourth modal",
    content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Est tempora, tenetur temporibus voluptatem quaerat facere sapiente quod aliquid veniam culpa itaque eius quibusdam vitae beatae magnam repellendus laborum molestias a.'
  },
}

let cont = document.getElementById('modals');
let buttons = document.getElementById('buttons');
let images = document.getElementById('images');

// function to construct a text modal
function constTextModal(mod) {
  let button = document.createElement("BUTTON");
  let createModal = document.createElement("DIV");
  let createModalContent = document.createElement("DIV");
  let createModalHeader = document.createElement("DIV");
  let createCloseBtn = document.createElement("SPAN");
  let h2 = document.createElement("H2");
  let createModalBody = document.createElement("DIV");
  let modalPar = document.createElement("P");
  let createModalFooter = document.createElement("DIV");
  let h3 = document.createElement("H3");
  button.classList.add('textBtn');
  button.classList.add('modalBtn');
  button.textContent = `Open ${modals[mod].buttonName}`;
  createModal.classList.add('modal');
  createModalContent.classList.add('modal-content');
  createModalHeader.classList.add('modal-header');
  createCloseBtn.classList.add('closeBtn');
  createModalBody.classList.add('modal-body');
  createModalFooter.classList.add('modal-footer');
  buttons.append(button);
  cont.append(createModal);
  createModal.append(createModalContent);
  createModalContent.append(createModalHeader, createModalBody, createModalFooter);
  createModalHeader.append(createCloseBtn, h2);
  createModalBody.append(modalPar);
  createModalFooter.append(h3);
  createCloseBtn.textContent = 'x';
  h2.textContent = modals[mod].header;
  modalPar.textContent = modals[mod].content;
  createModalFooter.textContent = modals[mod].footer;
}

// function to contruct an image modal
function constImageModal(mod) {
  let button = document.createElement("BUTTON");
  let createModal = document.createElement("DIV");
  let createModalContent = document.createElement("DIV");
  let createCloseBtn = document.createElement("SPAN");
  let createModalHeader = document.createElement("DIV");
  let createModalBody = document.createElement("DIV");
  let modalImg = document.createElement("IMG");
  let createModalFooter = document.createElement("DIV");
  let h3 = document.createElement("H3");
  button.classList.add('textBtn');
  button.classList.add('modalBtn');
  button.textContent = `Open ${modals[mod].buttonName}`;
  createModalHeader.classList.add('img-header');
  createModal.classList.add('modal');
  createModalContent.classList.add('modal-content');
  createCloseBtn.className = 'closeBtn imgCloseBtn';
  createModalBody.classList.add('modal-body');
  modalImg.classList.add('modalImg');
  createModalFooter.classList.add('modal-footer');
  buttons.append(button);
  cont.append(createModal);
  createModal.append(createModalContent);
  createModalHeader.append(createCloseBtn);
  createModalContent.append(createModalHeader, createModalBody, createModalFooter);
  createModalBody.style.cssText = 'display: flex; justify-content: center; align-items: center;';
  createModalBody.append(modalImg);
  createModalFooter.append(h3);
  createCloseBtn.textContent = 'x';
  modalImg.src = modals[mod].content;
  createModalFooter.textContent = modals[mod].footer;
}

// conditional to check obj type
for (let mod in modals) {
  if (modals[mod].type === 'text') {
    constTextModal(mod);
  } else if (modals[mod].type === 'image') {
    constImageModal(mod);
  } else {
    // different type oif medium
  }
}

// get the modal element
let modal = document.querySelectorAll('.modal');

// get the modal button
let modalBtn = document.querySelectorAll('.modalBtn');

// get the close button
let closeBtn = document.querySelectorAll('.closeBtn');

// event listener to open the modal
modalBtn.forEach((el, i) => openModal(el, i));

// function to open the targeted modal
function openModal(el, i) {
  el.addEventListener('click', () => {
    modal[i].style.animationName = 'animateModal';
    modal[i].style.display = 'flex';
  })
}

// event listener to close the modal on closeBtn
closeBtn.forEach((el, i) => closeButton(el, i));

// function to close the targeted modal
function closeButton(el, i) {
  el.addEventListener('click', () => {
    modal[i].style.animationName = 'closeModal';
    setTimeout(() => {
      modal[i].style.display = 'none';
    }, 500);
  })
}

// event listener to close the modal on window click
window.addEventListener('click', clickOutside);

// funciton to close the targeted modal on outside click
function clickOutside(e) {
  modal.forEach((el, i) => {
    if (e.target == el) {
      modal[i].style.animationName = 'closeModal';
      setTimeout(() => {
        modal[i].style.display = 'none';
      }, 500);
    }
  })
}

body{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 1.6;
}

.modalBtn {
    background: coral;
    padding: 1em 2em;
    color: #fff;
    border: 0;    
}

.imgCloseBtn {
    padding-right: 20px;
}

.modalBtn:hover{
    background-color: #333;
}

.modal {
    display: none;
    align-items: stretch;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
    animation-name: animateModal;
    animation-duration: 0.7s;
    animation-timing-function: ease-in-out;
}

.modal-content {
    background: #f4f4f4;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    margin: 20% auto;
    max-width: 70%;
    box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),  0 7px 20px 0 rgba(0,0,0,0.2);
    animation-name: animateModal;
    animation-duration: 0.7s;
    animation-timing-function: ease-in-out;
    border-radius: 21px;
}

.modal-header h2, .modal-footer h3 {
    margin: 0;
}

.modal-header {
    background: coral;
    padding: 15px;
    color: #f4f4f4;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.modal-body {
    padding: 10px 20px;
    background-color: #fff;
}

.modal-footer {
    background: coral;
    padding: 10px;
    color: #fff;
    text-align: center;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.closeBtn {
    color: #ccc;
    font-size: 20px;
    float: right; 
}

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

@keyframes animateModal {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes closeModal {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

<div id="buttons">
</div>

<div id="images">
</div>

<div id="modals">
</div>

注意：一旦我在上面的constModal 函数中创建了按钮元素，我就可以使用button.classList.add('modalBtn'); 向它们添加一个类，因此我的按钮元素将具有类modalBtn。因此，当我遍历该类时，我可以使用 let modal = document.querySelectorAll('.modal'); 调用模态类选择器，并在使用按钮索引的 forEach 循环中创建一个事件侦听器，在 forEach中设置> 循环，获取我希望打开的模态元素，使用它对应的索引 => modal[i]。