Anonymous
Модальное всплывающее окно не редактирует
Сообщение
Anonymous » 19 апр 2025, 14:14
Итак, я пытаюсь настроить это всплывающее окно после печати счета, где оператор может заполнить предоставленную сумму, и он автоматически разгадывает изменение.
Код: Выделить всё
console.log("✅ Generated Invoice:", filename);
window.showPaymentModal(invoice.total, monedha.split(' - ')[0]);
});
const modal = document.getElementById('payment-modal');
const paidInput = document.getElementById('paid-amount');
const changeOutput = document.getElementById('change-amount');
const confirmBtn = document.getElementById('confirm-payment');
const cancelBtn = document.getElementById('cancel-payment');
window.showPaymentModal = (total, currency = 'ALL') => {
modal.style.display = 'flex';
paidInput.value = '';
changeOutput.value = `0.00 ${currency}`;
setTimeout(() => paidInput.focus(), 50);
const updateChange = () => {
const paid = parseFloat(paidInput.value);
const change = !isNaN(paid) ? (paid - total).toFixed(2) : '0.00';
changeOutput.value = `${change} ${currency}`;
};
paidInput.removeEventListener('input', updateChange); // clean previous bindings
paidInput.addEventListener('input', updateChange);
confirmBtn.onclick = () => {
modal.style.display = 'none';
location.reload(); // Or continue to next logic
};
cancelBtn.onclick = () => {
modal.style.display = 'none';
};
};< /code>
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(5px);
justify-content: center;
align-items: center;
z-index: 9999;
}
.modal-box {
background: #fff;
padding: 2rem;
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
width: 320px;
text-align: center;
}
.modal-box input {
width: 90%;
padding: 0.5rem;
font-size: 16px;
margin-bottom: 1rem;
border: 1px solid #ccc;
border-radius: 8px;
text-align: center;
}
.modal-box input:focus {
border-color: #007aff;
outline: none;
}
.modal-actions {
display: flex;
gap: 1rem;
justify-content: center;
}
.modal-actions button {
flex: 1;
padding: 0.6rem;
font-weight: 500;
border: none;
border-radius: 8px;
background: #007aff;
color: white;
cursor: pointer;
}
.modal-actions button#cancel-payment {
background: #e0e0e0;
color: #333;
}< /code>
Pagesa e Klientit
Klienti Pagoi:
Kusuri:
✅ Konfirmo
❌ Anulo
всплывающее окно не будет редактировать, если я не вкладываю и не вмешивается. Я пытался моделировать фокус и не повезло, я попробовал множество вещей, но не повезло, у кого -нибудь был похожий опыт?>
Подробнее здесь:
https://stackoverflow.com/questions/795 ... -wont-edit
1745061274
Anonymous
Итак, я пытаюсь настроить это всплывающее окно после печати счета, где оператор может заполнить предоставленную сумму, и он автоматически разгадывает изменение.[code]console.log("✅ Generated Invoice:", filename); window.showPaymentModal(invoice.total, monedha.split(' - ')[0]); }); const modal = document.getElementById('payment-modal'); const paidInput = document.getElementById('paid-amount'); const changeOutput = document.getElementById('change-amount'); const confirmBtn = document.getElementById('confirm-payment'); const cancelBtn = document.getElementById('cancel-payment'); window.showPaymentModal = (total, currency = 'ALL') => { modal.style.display = 'flex'; paidInput.value = ''; changeOutput.value = `0.00 ${currency}`; setTimeout(() => paidInput.focus(), 50); const updateChange = () => { const paid = parseFloat(paidInput.value); const change = !isNaN(paid) ? (paid - total).toFixed(2) : '0.00'; changeOutput.value = `${change} ${currency}`; }; paidInput.removeEventListener('input', updateChange); // clean previous bindings paidInput.addEventListener('input', updateChange); confirmBtn.onclick = () => { modal.style.display = 'none'; location.reload(); // Or continue to next logic }; cancelBtn.onclick = () => { modal.style.display = 'none'; }; };< /code> .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(5px); justify-content: center; align-items: center; z-index: 9999; } .modal-box { background: #fff; padding: 2rem; border-radius: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); width: 320px; text-align: center; } .modal-box input { width: 90%; padding: 0.5rem; font-size: 16px; margin-bottom: 1rem; border: 1px solid #ccc; border-radius: 8px; text-align: center; } .modal-box input:focus { border-color: #007aff; outline: none; } .modal-actions { display: flex; gap: 1rem; justify-content: center; } .modal-actions button { flex: 1; padding: 0.6rem; font-weight: 500; border: none; border-radius: 8px; background: #007aff; color: white; cursor: pointer; } .modal-actions button#cancel-payment { background: #e0e0e0; color: #333; }< /code> Pagesa e Klientit Klienti Pagoi: Kusuri: ✅ Konfirmo ❌ Anulo [/code] всплывающее окно не будет редактировать, если я не вкладываю и не вмешивается. Я пытался моделировать фокус и не повезло, я попробовал множество вещей, но не повезло, у кого -нибудь был похожий опыт?> Подробнее здесь: [url]https://stackoverflow.com/questions/79582014/modal-popup-wont-edit[/url]