document.addEventListener("DOMContentLoaded", function() { // 1. Inject CSS styles const style = document.createElement("style"); style.textContent = ` .custom-btn-container { display: flex; gap: 10px; margin: 20px 0; } .custom-btn { background-color: #e87722; color: white; font-weight: bold; border: none; border-radius: 5px; padding: 10px 20px; cursor: pointer; text-align: center; font-size: 14px; } .custom-btn:hover { background-color: #d46b1f; } .custom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); justify-content: center; align-items: center; } .custom-modal-content { background: white; padding: 20px 30px; border-radius: 5px; max-width: 500px; font-family: Arial, sans-serif; color: #333; position: relative; } .custom-modal-content h2 { color: #e87722; margin-top: 0; } .custom-modal-content .close { position: absolute; right: 10px; top: 10px; cursor: pointer; font-size: 20px; font-weight: bold; } `; document.head.appendChild(style); // 2. Add button container const container = document.createElement("div"); container.className = "custom-btn-container"; container.innerHTML = ` `; document.body.prepend(container); // You can change where to insert // 3. Add modals const modalsHTML = ` `; document.body.insertAdjacentHTML("beforeend", modalsHTML); // 4. Modal open/close logic const buttons = document.querySelectorAll(".custom-btn"); const modals = document.querySelectorAll(".custom-modal"); buttons.forEach(btn => { btn.addEventListener("click", function() { const modalId = btn.getAttribute("data-modal"); document.getElementById(modalId).style.display = "flex"; }); }); modals.forEach(modal => { const closeBtn = modal.querySelector(".close"); closeBtn.addEventListener("click", () => modal.style.display = "none"); modal.addEventListener("click", (e) => { if (e.target === modal) modal.style.display = "none"; }); }); });

Miscellaneous

Miscellaneous