ДОСТИГНУТО:

01.11.2016-300 страниц в индексе Google;
19.01.2017-300 страниц в индексе Яндекса;
03.02.2017-40 ТИЦ;
05.02.2017- сайт принят в DMOZ каталог;

Создаем popup-окно

.

popapСоздаем popup-окно

Приветствую друзья!
Совсем недавно, примерно месяца три назад я начал изучать JavaScript и не безуспешно, я вам скажу. Когда я начал осваивать этот язык, моей главной целью было — научиться создавать всплывающий контент поверх страницы сайта, уж очень было интересно, как это делается, и вот сейчас я детально разобрался в том, как это можно реализовать на практике! Ниже поделюсь с вами данной информацией. Это моя первая статья по JavaScript, но надеюсь буду изучать язык и дальше и поделюсь с вами своими наработками! Как же все таки приятно понимать то, что ты учишься чему-то новому, полезному и интересному.

Ну не буду тянуть резину а сразу перейду к самому процессу создания простого POPUP-окна. Пусть вас не пугает наличие JavaScript, его всего-то будет две строчки, больше места занимает CSS. Наша задача — по клику на какой-то объект, должна сработать команда, присваивающая нашему popup-окну свойство «visibility: hidden;», то есть просто его скрыть, да, мы изначально его сделаем видимым, а потом скроем, в этом вся простота, никаких эффектов плавного появления не будет, к сожалению это или к счастью, не знаю...

Ну, для начала зададим HTML разметку:

 

 

Как вы уже поняли, popup — это основной блок окна, а popupwrap — это обертка, она примет основную массу всех стилей, но главное: она возьмет на себя «position: fixed;», в то время как popup будет «relative», а closepopup — «absolute», это нужно для того, чтобы closepopup мог, относительно popup, прикрепляться к его бокам. А temno — это затемнение основного контента нашей страницы, дабы привлечь внимание к нашему всплывающему окну.

Теперь разберемся с CSS:

Ну, и главный экшен. Пишем JavaScript!

То есть, мы создаем функцию «PopupClose», которая выполняет следующее: находит элемент по id — document.getElementById ('ID'),(в скобках и одинарных кавычках — id элемента), далее присваивает этому найденному элементу свойство стиля «visibility» со значением «hidden» — style.visibility = 'hidden'.

Куда вставлять фрагмент кода JavaScript вы можете прочитать в этой статье, или просмотреть исходный код демо-страницы.

«Ну вот и все, а Вы боялись!»
На этом на сегодня все друзья

.
БЕРЕГИТЕ СЕБЯ!




лайк

Эти красотки хотят чтобы ты их жестко лайкнул и даже несколько раз твитнул!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *