Modal doesn't fully render overtop HTML

JavaScript
1

I created a modal that should appear overtop the HTML body, however, for some weird reason, it only partially appears overtop the HTML body, and nothing seems to work, not even JavaScript. Is Bootstrap that mighty? This is what you see:

screen
screen1536×864 65.3 KB

Here is the code I used:

let modal;
let trigger;
let closeButton;
let idNameWithError = '';
/**
 * Use this constant if you wish to turn off the ability to use the "aria-hidden:true" option on the <BODY> tag. If set to true, the <body>
 * contents will be hidden from assistive readers, however, an ARIA-WARNING may be triggered within the console, disrendering the modal. It is
 * recommended for now to keep the value false, understanding that there could be a possibility of assistive readers inadvertently reading the
 * <body> contents
 */
const willUseAriaHidden = false;

function modalInit() {
	try {
		modal = document.querySelector('.cma-modal');
		closeButton = document.querySelector('.close-button');
    	closeButton.addEventListener('click', toggleModal);
    	window.addEventListener('click', windowOnClick);
	} catch (e) {
		console.log(`Cannot run modalInit(): ${e.message}`);
	}
}

function isModelOn() {
	try {
		return modal.classList.contains('show-modal');
	} catch (e) {
		console.log(`Cannot run populateModal(): ${e.message}`);
		return false;
	}
}

function populateModal(msg) {
	try {
		document.getElementById('modalHeader').innerHTML = msg;
	} catch (e) {
		console.log(`Cannot run populateModal(): ${e.message}`);
	}
}

/**
 * Security measure to prevent body from scrolling upon modal view based off
 * https://www.geeksforgeeks.org/how-to-prevent-body-from-scrolling-when-a-modal-is-opened-using-jquery/
 */
function toggleBodyScrolling() {
	try {
		const bodyObj = document.querySelector('body');
		const hasOverflow = (typeof bodyObj.style !== 'undefined' && bodyObj.style != null && 
							 bodyObj.style.overflow != undefined && bodyObj.style.overflow != null
						    );
		if (hasOverflow && bodyObj.style.overflow.includes('hidden')) {
			bodyObj.style.overflow = '';
			// RESTORE BODY READABILITY FOR 508 REQUIREMENT NOW THAT MODAL IS INVISIBLE AGAIN
			bodyObj.setAttribute('aria-hidden', false);
		} else if (hasOverflow) {
			bodyObj.style.overflow = 'hidden';
			// PREVENT SCREEN READERS FROM READING BODY BACKGROUND WHILE MODAL IS VISIBLE FOR 508 REQUIREMENT
			bodyObj.setAttribute('aria-hidden', true);
		}
	} catch (e) {
		console.log(`Cannot run toggleBodyScrolling(): ${e.message}`);
	}
}

/**
 * This function will allow for the modal header content to be tabbable by screen readers, and it will also remove the tabbable
 * capability once the modal is rendered invisible.  Based off http://web-accessibility.carnegiemuseums.org/code/dialogs/
 */
function toggleHeaderContent() {
	try {
		const headerObj = document.getElementById('modalHeader');
		const headerObjExists = (typeof headerObj !== 'undefined' && headerObj != null);
		if (headerObjExists && modal.classList.contains('show-modal')) {
			headerObj.setAttribute('tabindex', '0');
		} else if (headerObjExists) {
			headerObj.removeAttribute('tabindex');
		}
	} catch (e) {
		console.log(`Cannot run toggleHeaderContent(): ${e.message}`);
	}
}

function toggleModal() {
	try {
		modal.classList.toggle('show-modal');
		if (willUseAriaHidden) {
			toggleBodyScrolling();
		}
		
		toggleHeaderContent();
	} catch (e) {
		console.log(`Cannot run toggleModal(): ${e.message}`);
	}
}

function windowOnClick(event) {
	try {
		if (event.target === modal) {
    		toggleModal();
		}
	} catch (e) {
		console.log(`Cannot run windowOnClick(): ${e.message}`);
	}
}

/**
 * Ref: https://stackoverflow.com/questions/79159883/warning-blocked-aria-hidden-on-an-element-because-its-descendant-retained-focu
 */
function handleModalFocus() {
	try {
		document.getElementById('submit').addEventListener('click', toggleModal);
		document.getElementById('submit').classList.add('modal-accessor-pointer');
		document.activeElement.blur();
		if (isModelOn()) {
			document.body.blur();
		} else {
			document.body.focus();
		}
	} catch (e) {
		console.log(`Unable to run handleModalFocus(): ${e.message}`);
	}
}

// This is in a separate init .js file
$(document).ready(() => {
	modalInit();	
	const modalBlock = setInterval(() => {
		if (typeof document.getElementById('cmaModalActivatorDiv') !== 'undefined' && document.getElementById('cmaModalActivatorDiv') != null) {
			clearInterval(modalBlock);
			handleModalFocus();
			populateModalMsg = 'Your session is now expired. To continue using the CMA you will need to <a href="../../login/login.html">return ' +
							   'to Login</a>';
			populateModal(populateModalMsg);
			toggleModal();
		}
	}, 100);
});

I have no idea how to fix this while keeping Bootstrap CSS. Help appreciated. Thanks

2

Is this all the code, how are you getting this to the web?

3

We would need to see your CSS. Preferably, using a live example (like Codepen) or a repo.