Popup Div HTML5 с использованием только CSS и базового / чистого JavaScript - PullRequest
1 голос
/ 09 февраля 2012

Обратите внимание: С моей компанией, принимающей сайт, jQuery (очень к сожалению) является НЕ опцией для меня, и я не могу ссылаться на external JS или CSSфайлы.В качестве временного решения мой всплывающий блок содержит код CSS AND JS в разделе «head» моих веб-страниц.

Моя проблема, я надеюсь, требует простого обновления / настройки моего существующего JS.Всплывающее окно Div (для контактной формы) на моем сайте, которое функционировало на 100% правильно (за исключением позиции: исправленные проблемы в IE, от которых я на данный момент отказался) всего неделю назад.Ну, моя хостинговая компания только что перешла на HTML5 (с «DTD 4.01 Transitional», я считаю), и теперь мой всплывающий div больше не работает корректно в ЛЮБОМ браузере (IE9, FF, Chrome, Safari), некоторые хуже других.

Проблемы, которые нужно исправить (зайдите на мой сайт http://solitairethahalo.com, чтобы увидеть его в действии):

  • ИСПРАВЛЕНО (все 4 браузера)) html-тег "line-height", который я использовал для форматирования инструкции / информации в контактной форме, больше не работает;в результате класс div "Form" теперь больше, чем высота контейнера div
  • 75% FIXED (Firefox & IE) позиционирование неверно;всплывающее окно появляется в нижней части экрана, так что видна только небольшая часть заголовка всплывающего окна
  • 50% ИСПРАВЛЕНО (все 4 браузера) в моем существующем всплывающем окне никогда не былокод для этого, но я бы хотел, чтобы всплывающий элемент div оставался по центру / фиксирован, когда размер окна браузера по возможности изменяется

Я не могу правильно вставить свой существующий код, поэтому я сделалон доступен через мой сайт: http://solitairethahalo.com/popupdiv.txt

Пожалуйста, предоставьте (если возможно, напишите мне) пересмотренную HTML5-версию моего существующего кода, если это возможно.

Спасибо!


ОБНОВЛЕНИЯ:

  • Высота строки: После просмотра и выяснения проблемы я исправил проблему, просто изменив на.Рад, что все было просто.
  • Расположение и изменение размера всплывающего окна: ошибка позиционирования исправлена ​​с небольшой корректировкой моего существующего кода.Использование кода js из комментария ниже позволило мне получить желаемое перемещение всплывающего окна при изменении размера окна.Тем не менее, я не смог заставить модальное окно работать с этим кодом.Итак, на данный момент я вернулся к своему собственному пересмотренному коду, в котором в настоящее время отсутствует функция изменения размера, но я все еще работаю над ним.

1 Ответ

1 голос
/ 09 февраля 2012

Если вы не можете использовать JS, то это возможно только одним способом.

Вы можете сделать одну вещь, либо для всплывающего окна замените его на скользящую панель. Добавьте ваш всплывающий div внутри div "contact" А из CSS3 при наведении курсора мыши на ваш «контактный» div используйте переход css3 и установите его положение влево, чтобы отобразить всплывающее окно.

Это будет работать во всех браузерах. Анимация не будет работать в IE8 или ниже.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...