Мобильная версияЯ пытался внедрить модальные окна на свой одностраничный сайт. первые два работали, а новые нет, и я не могу понять, почему.
UserModal и contactModal работают отлично, а новый GrubIIModal — нет, и я трижды проверил свой код. Я схожу с ума из-за этого.
Вот мой текущий код (я удалил большинство ссылок из кода, поскольку переполнение стека продолжало сообщать мне, что мой вопрос — спам)
Pixelwolf.net /* Сброс полей и отступов по умолчанию для тела и элементов HTML */ html, тело { маржа: 0; заполнение: 0; ширина: 100%; высота: 100%; переполнение: скрыто; /* Скрыть полосы прокрутки */ цвет фона: #008080; /* Сине-зеленый цвет фона */ } тело { размер фона: обложка; семейство шрифтов: Arial, без засечек; /* Вы можете выбрать более подходящий шрифт */ } #панель задач { цвет фона: #C0C0C0; /* Светло-серая панель задач */ положение: фиксированное; внизу: 0; ширина: 100%; отступ: 4px 0; /* Уменьшение отступов */ выравнивание текста: по центру; /* Эффект жесткого, резкого скоса */ border-top: 2 пикселя, сплошной #fff; нижняя граница: 2 пикселя, сплошная #000; } .start-button-container { ширина: 90 пикселей; /* Уменьшите ширину кнопки «Пуск» до 90 пикселей */ плыть налево; /* Выравнивание по левому краю панели задач */ } #кнопка Пуск { цвет фона: #C0C0C0; /* Серая кнопка запуска */ цвет: #000; /* Цвет текста */ ширина: 100%; /* Кнопка занимает всю ширину контейнера */ высота: 25 пикселей; /* Скорректированная высота */ курсор: указатель; выравнивание текста: по центру; /* Центрируем текст кнопки по горизонтали */ высота строки: 25 пикселей; /* Центрируем текст кнопки по вертикали */ положение: относительное; /* Эффект жесткого, резкого скоса для кнопки */ border-top: 2 пикселя, сплошной #fff; левая граница: 2 пикселя, сплошная #fff; правая граница: 2 пикселя, сплошной #000; нижняя граница: 2 пикселя, сплошная #000; z-индекс: 1; /* Убедитесь, что кнопка находится над меню */ } .popup-контейнер { положение: фиксированное; внизу: 20 пикселей; /* Выравнивание на 20 пикселей по нижнему краю */ слева: 0; ширина: 150 пикселей; /* Фиксированная ширина для выравнивания */ дисплей: нет; z-индекс: 2; /* Убедитесь, что меню находится над кнопкой */ } .неожиданно возникнуть { цвет фона: #C0C0C0; /* Серый фон меню */ фоновое изображение: URL('https://pixelwolf.net/images/icons/PopupImage.png'); /* Указываем URL-адрес изображения */ фоновый повтор: без повтора; /* Предотвратить повторение изображения */ фоновая позиция: слева внизу; /* Выравниваем изображение по левому нижнему краю */ размер фона: 30 пикселей авто; /* Устанавливаем ширину 35 пикселей и сохраняем соотношение сторон */ граница: 2 пикселя, сплошная #000; /* Граница меню */ ширина: 250 пикселей; отступ: 10 пикселей; положение: относительное; /* Жесткий, резкий эффект скоса всплывающего окна */ отступ слева: 35 пикселей; border-top: 2 пикселя, сплошной #fff; левая граница: 2 пикселя, сплошная #fff; правая граница: 2 пикселя, сплошной #000; нижняя граница: 2 пикселя, сплошная #000; минимальная высота: 200 пикселей; } .start-button-container:hover .popup-container { /* Показать меню при наведении */ дисплей: блок; } .popup ул { отступ слева: 10 пикселей; левая граница: 1 пиксель, сплошной черный; /* Добавляем полосу шириной 10 пикселей слева */ тип стиля списка: нет; /* Скрыть пункты списка */ } .пункт меню { отступ: 5 пикселей 0; выравнивание текста: по левому краю; /* Выравниваем пункты меню по левому краю */ border-top: 1px сплошной прозрачный; /* Удалить границу между пунктами меню */ /* Добавляем эффект наведения */ переход: фоновый цвет 0,3 с, цвет 0,3 с; курсор: указатель; положение: относительное; дисплей: гибкий; выровнять-элементы: по центру; /* Центрировать элементы по вертикали */ высота: 10 пикселей; } .menu-item:hover { цвет фона: #000080; /* Синий фон при наведении */ цвет: #fff; /* Белый текст при наведении */ } .menu-item:last-child { граница: нет; } .подменю { позиция: абсолютная; слева: 100%; верх: 0; дисплей: нет; цвет фона: #C0C0C0; /* Серый фон подменю */ /* Жесткая скошенная граница подменю */ border-top: 2 пикселя, сплошной #fff; левая граница: 2 пикселя, сплошная #fff; правая граница: 2 пикселя, сплошной #000; нижняя граница: 2 пикселя, сплошная #000; ширина: 250 пикселей; размер коробки: граница-коробка; /* Включаем отступы при вычислении ширины */ } .подменю:до { содержание: ""; позиция: абсолютная; слева: 0; верх: 0; ширина: 50 пикселей; /* Отрегулируйте ширину по мере необходимости */ высота: 100%; } .подменю img { максимальная ширина: 15 пикселей; /* Отрегулируйте размер изображения по мере необходимости */ высота: авто; } .sub-меню-текст { положение: относительное; слева: 5 пикселей; /* Отрегулируйте позиционирование по мере необходимости */ высота: 12 пикселей; } .menu-item:hover .sub-menu { дисплей: блок; } .desktop-icon-container { отображать: блокировать; поле: 10 пикселей; ширина: 65 пикселей; выравнивание текста: по центру; } .desktop-icon img { максимальная ширина: 60 пикселей; высота: авто; } .desktop-icon-text { белый цвет; /* Белый цвет текста заполнителя */ выровнять-контент: центр; поле внизу: 15 пикселей; маржа-верх: -2px; } .lock-контейнер { позиция: абсолютная; справа: 10 пикселей; низ: 50%; /* Выравнивание по вертикали по центру */ трансформировать: транслировать(0, 50%); /* Вертикально по центру с использованием преобразования */ размер шрифта: 14 пикселей; черный цвет; /* Устанавливаем черный цвет шрифта */ цвет фона: #C0C0C0; /* Серый фон */ /* Инвертированная скошенная граница с темными краями слева и сверху */ border-top: 2 пикселя, сплошной #000; левая граница: 2 пикселя, сплошной #000; правая граница: 2 пикселя, сплошная #fff; нижняя граница: 2 пикселя, сплошная #fff; отступ: 4 пикселя; /* Заполнение внутри контейнера */ } .копирайтер-контейнер { позиция: абсолютная; осталось: 50%; низ: 50%; трансформировать: транслировать(-50%, 50%); размер шрифта: 14 пикселей; черный цвет; цвет фона: #C0C0C0; граница: нет; /* Убран скос */ отступ: 4 пикселя; } /* Модальный CSS */ .модальный { дисплей: нет; положение: фиксированное; осталось: 50%; верх: 50%; трансформировать: транслировать(-50%, -50%); ширина: 985 пикселей; высота: 688 пикселей; фоновое изображение: URL(''); box-shadow: 2px 2px 4px rgba(0, 0, 0, 1); отступ: 20 пикселей; /* Добавляем отступы к модальному содержимому */ отступ-верх: 60 пикселей; /* Добавляем дополнительные отступы в верхнюю часть модального окна */ } .modal-кнопка { отображение: встроенный блок; заполнение: 0,375рем 0,75рем; размер шрифта: 1rem; высота строки: 1,5; цвет фона: прозрачный; /* Цвет фона кнопки */ цвет: #fff; /* Цвет текста кнопки */ граница: 0 пикселей, сплошная #007bff; /* Граница кнопки */ радиус границы: 0,25рем; /* Радиус границы кнопки */ выравнивание текста: по центру; текстовое оформление: нет; /* Удалить подчеркивание из привязки */ курсор: указатель; } /* Стиль для контейнера div */ .about-контейнер { ширина: 900 пикселей; высота: 600 пикселей; маржа: 0 авто; /* Центрируем контейнер по горизонтали */ цвет фона: #FFFFFF; /* Белый цвет фона */ отступ: 20 пикселей; /* Добавляем отступы в контейнер */ размер коробки: граница-коробка; /* Включаем отступы по ширине и высоте */ семейство шрифтов: Arial, без засечек; /* Выберите нужный шрифт */ граница: 0 пикселей, сплошная #fff; положение: относительное; поле сверху: 30 пикселей; } /* Стиль квадратного изображения */ .изображение профиля { ширина: 200 пикселей; высота: 200 пикселей; плыть налево; /* Сместить изображение влево */ поле справа: 20 пикселей; /* Добавляем немного места справа от изображения */ фоновое изображение: URL(''); размер фона: обложка; /* Покрываем весь квадрат изображением */ } /* Стиль описания контента */ .about-content { переполнение: скрыто; /* Очищаем float и предотвращаем обтекание содержимого изображения */ левая граница: 2 пикселя, сплошная #C0C0C0; отступ слева: 18 пикселей; } /* Стиль текста в содержимом */ .about-текст { размер шрифта: 16 пикселей; высота строки: 1,5; выравнивание текста: по ширине; /* Выравниваем текст для наглядности */ } /* Стиль ссылки LinkedIn */ .linkedin-ссылка { дисплей: блок; /* Делаем ссылку элементом уровня блока */ маржа сверху: 10 пикселей; /* Добавьте немного места над ссылкой */ } /* Стилизация контейнера формы */ .Форма обратной связи { максимальная ширина: 400 пикселей; маржа: 0 авто; отступ: 20 пикселей; } /* Стилизация меток и полей формы */ метка .contact-form { дисплей: блок; маржа сверху: 10 пикселей; } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea { ширина: 100%; отступ: 10 пикселей; поле сверху: 5 пикселей; нижнее поле: 10 пикселей; граница: 1 пиксель, сплошная #ccc; } /* Стилизация контейнера reCAPTCHA */ .g-recaptcha { поле: 10 пикселей 0; } .contact-form input[type="submit"] { цвет фона: #C0C0C0; белый цвет; border-top: 2 пикселя, сплошной #fff; левая граница: 2 пикселя, сплошная #fff; правая граница: 2 пикселя, сплошной #000; нижняя граница: 2 пикселя, сплошная #000; отступ: 10 пикселей 20 пикселей; курсор: указатель; } .contact-form input[type="submit"]:hover { цвет фона: #C0C0C0; border-top: 2 пикселя, сплошной #fff; левая граница: 2 пикселя, сплошная #fff; правая граница: 2 пикселя, сплошной #000; нижняя граница: 2 пикселя, сплошная #000; }
Контакт
Блог
функция updateClock() { const now = новая дата(); const часы = (now.getHours() % 12 || 12).toString(); const минуты = now.getMinutes().toString().padStart(2, '0'); const секунды = now.getSeconds().toString().padStart(2, '0'); const period = now.getHours() >= 12? 'ДО ПОЛУДНЯ, ПОСЛЕ ПОЛУДНЯ'; const clockElement = document.getElementById('часы'); clockElement.textContent = `${часы}:${минуты} ${период}`; } setInterval (updateClock, 1000); обновлениеClock(); // Первоначальное обновление
