            |
| Форумы | Обучение | Журнал | Услуги | видеоклипы | Новости | Блоги |
| ||
полная страница оверлей окноAbraham Chaffin
полной страницы всплывающее окно оверлея В этом учебнике вы узнаете, как создать полную страницы всплывающее окно, которое оверлеи существующей html страница. Этот метод часто используется для отображения видео, видеофайл, изображение, или форму, когда пользователь нажимает на один элемент в веб-страницу.
Например мнение ВведениеЭтот метод не появится всплывающее окно, как в целом можно было бы думать. это не отдельное окно в html браузер, который открыл, а Div оверлеев, что существующая html страница. в Div является полу-прозрачным и создает приятный эффект, что позволяет пользователю знать, что они могут вернуться на другую страницу, закрыв окно (DIV), который по началу.Этот метод за выполнение этой довольно прямо вперед: начальное состояние в Div что будет оверлей страницу скрывается не в содержании ее внутренней html. Это означает, что первоначально ничего между открывающим тегом Div и закрывающим тегом Div и элемент имеет дисплей никто. до начала показа в Div Вы должны сначала выбрать элемент, и о том, что пользователь будет нажать на, наведите курсор мыши, и т.д.. присвоить поведение. Вы могли бы даже он начал, когда страница загружается, если вы хотите. Вы в целом будет иметь изображение, Кнопка, или текст, который пользователь нажимает на инициировать функцию JavaScript. Div когда на дисплее отображается в JavaScript функции она в основном устранения отображения стоимости никто на дисплей значение пустым или'', который возвращается к элементам, по умолчанию, которое будет отображаться. во-вторых, Div Внутренняя html заполняется предопределенные html Код, который будет код, который как вы хотите быть отображается в окне оверлея. В этом примере мы будем иметь видео внутри стола, который помогает центре видео в центре экрана. Кроме того, будет тесно кнопку, чтобы закрыть окно или полу-прозрачным всплывающее Div. нажав на кнопку "Закрыть" в всплывающем окне инициирует отмену, когда она отображалась. он присваивает Div отображения значения назад никто не задает, и внутренняя html Перейти к чему не. код, чтобы начать здесь код от начала до конца, а затем мы отправимся за его кусок за куском:строгого режимаэтой строки кода, необходимо в самом начале этого документа, с тем чтобы строгого режима в ie7. Твердая позиционирование не поддерживается в ie7 без этого выполнены, и это учебное пособие не будет работать. известно также, что это может работать не во всех браузерах, установленный позиционирование новой CSS собственности.CSS укладкаДавайте над CSS укладка в Div и посмотреть, что делает его полу-прозрачным Div что оверлеи остальной части страницы:Z-индекс CSS имущество используется для повышения слоя Z пространство выше всех других элементов, таких, как выпадающего меню, и т.д.. установив ее на 10000 хорошо обеспечивает вы собираетесь получить выше большинства других элементов, которые имеют определенный Z-индекс. наиболее трудная часть становится полуфинале транспарентного Div силу разных браузерах. Firefox, Internet Explorer, сафари, опера, и даже Google хром = O, не все эти браузеры используют один и тот же полу-прозрачным CSS собственности набор. т.е. использует его настройки фильтра. Mozilla Firefox имеет "-МОКС-непрозрачность". и другие используют "непрозрачность", которые делают самые чувства ко мне и, надо надеяться, станет стандартом в будущем. в первой строке "# (displaybox"Присваивает следующие стиль элемента с ID displaybox. в ближайшие пять линий разные способы, чтобы установить прозрачность до 50% " Фильтр: альфа (непрозрачность = 50); / * т.е. старше * Фильтр:PROGID:Dximagetransform.microsoft.альфа (непрозрачность = 50); / * Например * / -МОЗ-непрозрачность: .50; / * * старше Mozilla / -KHTML-непрозрачность: 0.5; / * старше сафари * непрозрачность: 0.5; / * поддерживается текущим Mozilla, сафари, и опера * / " просто измените 5, .5 или 50 значения тому, что вам нравится. пример установлен до 50% непрозрачности. "фонового цвета:# 000000;"Конечно, делает цвет черный, а затем 50% прозрачности даст серый. "Позиция:фиксированный;"Задает позиционирования, которые должны быть установлены не родственник или абсолютный приток страницу. Это делает его таким элементом может прыгать и плавать поверх других элементов, и устанавливаются на окна, а не страницы или другие элементы. относительное позиционирование помещает элемент в потоке страницу и перемещается и перемещает других элементов вокруг него. абсолютная плывет выше, но и по отношению к странице, не в окно, Если вы использовали этот элемент будет оставаться только в верхней части страницы. "верх:0px; слева:0px; ширина:100%; высота:100%;"Места полуфинале транспарентного Div в верхнем левом углу и распространяет ее, поскольку она может идти через окно. "Текст-присоединяются:центр; вертикальном присоединяются:среднего;"Я начала пытаться центрировать элементы внутренней стороне Div в центре страницы. JavaScriptТеперь давайте взглянем на JavaScript, что делает элемент изменений, когда пользователь взаимодействует со страницей и выполняет функцию JavaScript:в первой строке функция объявляет функцию название "Функция пользователя () (", Которая будет использоваться на всей странице. "VAR = Thediv документ.Getelementbyid ( 'displaybox'); устанавливает значение "Thediv" переменную в Div с идентификатором "displaybox". "Thediv" переменная будет использоваться счет остальной части функцию, так что браузер не придется повторно получить displaybox элемент. "если (Thediv.стиль.дисплея == "None") ("Говорит в основном, "Если сейчас Thediv не отображается делать то, что я собирался сказать вам." Thediv делать видимым "Thediv.стиль.DISPLAY = "";". падение в этом html В Thediv "Thediv.Innerhtml = "a href='#' onclick='return clicker();' закрыть окно / A"". Inbetween двух цитатой знаки Здесь вы бы, что html Вы хотите быть отображается. помните, что с другой цитатой [ "] будет конец этого тега поэтому вы должны использовать единый котировки в вашем html [ '] Или избежать [ "], используя слеш [] перед всеми котировки E.g. [ "]. Вам следует то есть иметь возможность закрыть окно раз. другие мудрые пользователь застревают в окне в верхней части страницы и не смогут получить обратно. "() другое"Если Div тогда было видно... "Thediv.стиль.DISPLAY = "нет";"Скрыть его "Thediv.Innerhtml ='';"И установить его содержании ничего не. "}"Окончание" если другое заявление. "вернуться ложным;"Возвращение ложным для функции. этом в основном делает это так, что ссылка не на самом деле идти до места назначения из HREF при нажатии на нее. При использовании метода onclick по ссылке. "}"Конец функции. сделать его работучтобы сделать его реально работать на странице нужно иметь Div-то скрытые страницы в начале и что-то для пользователя нажать на:скрытый displaybox Div: связь, которая будет выполнять и вернуть кликер JavaScript функция onclick: Например мнение Это должно дать вам некоторое представление о том, как создать этот эффект, а также дать вам понимание достаточно скорректировать, изменение, и манипулировать ей идти на свой html макет. получать удовольствие! | |||||||||||||
|
Форумы • Обучение • Журнал • Услуги • видеоклипы • Новости • Блоги © CreativeCOW.net Все права защищены. Creative общин мира [Верх] English • العربية • 中文 • Français • Deutsch • עברית • हिन्दी • Italiano • 日本語 • Português • Русский • Español |
