0 Пользователей и 1 Гость просматривают эту тему.
  • 2 Ответов
  • 142 Просмотров
*

Dimonchester

  • Новичок
  • 2
  • 0 / 0
Не работает JavaScript в Joomla
« : 25.04.2021, 18:24:59 »
Есть код на JavaScript на PopUp окно:
Код
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);
}

HTML часть:

Код
<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>

CSS часть:

Код
.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;
}

Данный код(js) никак не хочет работать, когда я переношу его на свой шаблон в Joomla. Все файлы подключены и работают (в этих файлах есть и другой код, который полностью работает), консоль никаких ошибок не выдаёт (если допустить ошибку в js коде, тогда уже выдаёт)

На моём шаблоне (который не подключён к серверу) всё прекрасно работет.

Почему js код не работет? И как сделать так, чтобы он начал работать?
*

sivers

  • Завсегдатай
  • 1690
  • 232 / 0
Re: Не работает JavaScript в Joomla
« Ответ #1 : 25.04.2021, 18:55:51 »
попробуйте отрабатывать код после загрузки всей страницы. для этого можно добавить атрибут defer если код подключается внешним файлом, либо обернуть код (весь, который до функций) в обработчик события загрузки страницы (в примере это функция onLoad:
Код
if(window.addEventListener){
    window.addEventListener('load', onLoad, false);
}else{
    if(window.attachEvent){
        window.attachEvent('onload', onLoad);
    }else{
        window.onload = onLoad;
    }
}

function onLoad(){
    console.log('Страница загружена!');
}
На связи в телеге @sivers
https://sivers.su/
*

Dimonchester

  • Новичок
  • 2
  • 0 / 0
Re: Не работает JavaScript в Joomla
« Ответ #2 : 25.04.2021, 22:35:36 »
попробуйте отрабатывать код после загрузки всей страницы. для этого можно добавить атрибут defer если код подключается внешним файлом, либо обернуть код (весь, который до функций) в обработчик события загрузки страницы (в примере это функция onLoad:
Код
if(window.addEventListener){
    window.addEventListener('load', onLoad, false);
}else{
    if(window.attachEvent){
        window.attachEvent('onload', onLoad);
    }else{
        window.onload = onLoad;
    }
}

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

Добавил атрибут defer и всё заработало. Спасибо большое! ^-^
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Защита сайта на Joomla 3

Автор Alex_gs

Ответов: 4
Просмотров: 177
Последний ответ 11.06.2021, 19:39:07
от R31rus
Из сайта на Joomla 3 сделать приложение для android и ios

Автор a159cm

Ответов: 2
Просмотров: 577
Последний ответ 23.05.2021, 21:17:11
от xpank
Баг в поиске Joomla 3.8.5 <span class="highlight'>title</span>

Автор hubby

Ответов: 25
Просмотров: 3983
Последний ответ 15.05.2021, 07:49:26
от jem777
Нужны доработки и исправление ошибок Joomla! 3.6.2

Автор Volegost

Ответов: 0
Просмотров: 100
Последний ответ 28.04.2021, 17:40:35
от Volegost
Как сделать микроразметку twitter cards для Joomla 3?

Автор ALEXRAW

Ответов: 2
Просмотров: 198
Последний ответ 23.04.2021, 23:58:01
от fireman