Не работает JavaScript в Joomla - Joomla 3.x: Общие вопросы

const popupLinks = document.querySelectorAll('.popup-link');
const body = document.querySelector('body');
const lockPadding = document.querySelectorAll(".lock-padding");

let unlock = true;

const timeout = 800;

if (popupLinks.length > 0) {
    for (let index = 0; index < popupLinks.length; index++) {
        const popupLink = popupLinks[index];
        popupLink.addEventListener("click", function (e) {
            const popupName = popupLink.getAttribute('href').replace('#', '');
            const curentPopup = document.getElementById(popupName);
            popupOpen(curentPopup);
            e.preventDefault();
        });
    }
}

const popupCloseIcon = document.querySelectorAll('.close-popup');
if (popupCloseIcon.length > 0) {
    for (let index = 0; index < popupCloseIcon.length; index++) {
        const el = popupCloseIcon[index];
        el.addEventListener('click', function (e) {
            popupClose(el.closest('.popup'));
            e.preventDefault();
        });
    }
}

function popupOpen(curentPopup) {
    if (curentPopup && unlock) {
        const popupActive = document.querySelector('.popup.open');
        if (popupActive) {
            popupClose(popupActive, false);
        } else {
            bodyLock();
        }
        curentPopup.classList.add('open');
        curentPopup.addEventListener("click", function (e) {
            if (!e.target.closest('.popup__content')) {
                popupClose(e.target.closest('.popup'));
            }
        });
    }
}

function popupClose(popupActive, doUnlock = true) {
    if (unlock) {
        popupActive.classList.remove('open');
        if (doUnlock) {
            bodyUnLock();
        }
    }
}

function bodyLock() {
    const lockPaddingValue = window.innerWidth - document.querySelector('.wrapper').offsetWidth + 'px';

    if (lockPadding.length > 0) {
        for (let index = 0; index < lockPadding.length; index++) {
            const el = lockPadding[index];
            el.style.paddingRight = lockPaddingValue;
        }
    }
    body.style.paddingRight = lockPaddingValue;
    body.classList.add('lock');

    unlock = false;
    setTimeout(function () {
        unlock = true;
    }, timeout);
}

function bodyUnLock() {
    setTimeout(function () {
        if (lockPadding.length > 0) {
            for (let index = 0; index < lockPadding.length; index++) {
                const el = lockPadding[index];
                el.style.paddingRight = '0px';
            }
        }
        body.style.paddingRight = '0px';
        body.classList.remove('lock');
    }, timeout);

    unlock = false;
    setTimeout(function () {
        unlock = true;
    }, timeout);
}

<div class="popup__form">
    <a href="#popup" class="popup-link"><button>Заявка</button></a>
    <div id="popup" class="popup">
        <div class="popup__body">
            <div class="popup__content">
                <a href="#header" class="popup__close close-popup">X</a>
                <div class="popup__title">Модальное окно №1</div>
                <div class="popup__text">
                    <form action="">
                        <table>
                            <tr>
                                <td>
                                    <p>Введите имя</p>
                                </td>
                                <td>
                                    <input type="text" size="40" class="edit__box"
                                        placeholder="Введите имя">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p>Введите имя</p>
                                </td>
                                <td>
                                    <input type="text" size="40" class="edit__box"
                                        placeholder="Введите имя">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p>Введите имя</p>
                                </td>
                                <td>
                                    <input type="text" size="40" class="edit__box"
                                        placeholder="Введите имя">
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

.popup__form
{
    display: flex;
    justify-content: center;
}
.popup-link button
{
    font-size: 20px;
	font-weight: 700;
	color: white;
	text-decoration: none;
	padding: .8em 1em calc(.8em + 3px);
	border-radius: 3px;
	border:none;
	outline:none;
	background: gray;
	transition: 0.2s
}
.popup-link button:hover
{
    background: #000;
}

body.lock
{
    overflow:hidden;
}
.popup
{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.61);
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
    overflow-x: hidden;
    transition: all 0.8s ease 0s;
}
.popup.open
{
    opacity: 1;
    visibility: visible;
    z-index: 1;
}
.popup.open .popup__content
{
    /* transform: perspective(600px) translate(0px, 0%) rotateX(0deg); */
    transform: translate(0px, 0px);
    opacity: 1;
}
.popup__body
{
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 10px 30px 10px;
    transition: all 0.8s ease 0s;
}
.popup__content
{
    background-color: #fff;
    color: #000;
    max-width: 800px;
    padding: 30px;
    position: relative;
    transform: translate(0px, -100%);
    transition: all 0.8s ease 0s;
    opacity: 0;
}
.popup__close
{
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 20px;
    color: #000
}
.popup__title
{
    font-size: 40px;
    margin: 0px 0p 1em 0px;
}

if(window.addEventListener){
    window.addEventListener('load', onLoad, false);
}else{
    if(window.attachEvent){
        window.attachEvent('onload', onLoad);
    }else{
        window.onload = onLoad;
    }
}

function onLoad(){
    console.log('Страница загружена!');
}