如何重复使用相同的代码多次- 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

使用循环遍历open modal按钮元素使用类选择它们，然后在事件侦听器中遍历每个对象。这可以使用querySelectorAll()方法来选择打开模态的元素(您的按钮)和一个forEach循环来遍历按钮元素。使用值和键在forEach循环中处理与按钮modal[key]配对的模态元素。

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函数中有一个事件监听器，它接受循环值和键的参数。

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