`;
document.body.appendChild(modal);
// Add basic modal styles
const style = document.createElement('style');
style.textContent = `
#scheduleModal {
display: none;
position: fixed;
z-index: 9999;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.6);
}
.modal-content {
position: relative;
width: 90%; height: 90%;
margin: 3% auto;
background: #fff;
border-radius: 8px;
overflow: hidden;
}
#serviceIframe {
width: 100%; height: 100%;
border: none;
}
.close-button {
position: absolute;
top: 8px;
right: 12px;
font-size: 24px;
font-weight: bold;
cursor: pointer;
z-index: 1001;
}
`;
document.head.appendChild(style);
$('a[href="/schedule-service.html"],a[href="/serviceappmt.aspx"]').addClass('openModalBtn').attr('id','openModalBtn').attr('href','#')
// Setup open/close logic
const openBtns = document.getElementsByClassName("openModalBtn");
const openBtnsCustom = document.getElementsByClassName('open-service-modal-btn');
const openBtnsDropdown = document.getElementsByClassName('scheduleappointmentchild');
const closeBtn = modal.querySelector("#closeModal");
const iframe = modal.querySelector("#serviceIframe");
const iframeURL = "https://consumer.xtime.com/scheduling/?webKey=xtm202207111217xx1&skipRedirect=true&WMODE=true#/";
function openModal() {
console.log('opening modal');
iframe.src = iframeURL;
modal.style.display = "block";
document.body.style.overflow = "hidden";
}
Array.from(openBtns).forEach(btn => {
btn.addEventListener("click", function (e) {
e.preventDefault();
openModal();
});
});
Array.from(openBtnsDropdown).forEach(btn => {
btn.addEventListener("click", function (e) {
e.preventDefault();
openModal();
});
});
Array.from(openBtnsCustom).forEach(btn => {
btn.addEventListener("click", function (e) {
e.preventDefault();
openModal();
});
});
// ADDITIONAL TRIGGER for specific link
document.addEventListener("click", function (e) {
const target = e.target.closest('a.scheduleappointmentchild[href="/schedule-service.html"]');
if (target && target.closest('.servicepartsdropdown ul li')) {
e.preventDefault();
openModal();
}
});
closeBtn.addEventListener("click", function () {
modal.style.display = "none";
iframe.src = "";
document.body.style.overflow = "";
});
window.addEventListener("click", function (event) {
if (event.target === modal) {
modal.style.display = "none";
iframe.src = "";
document.body.style.overflow = "";
}
});
