Перейти к содержимому

MOAB

- - - - -

Как сделать элемент с затемнением остального фона lightbox-style?


  • Войдите, чтобы ответить
Сообщений в теме: 14

#1 El Marshal Che

El Marshal Che

    Мастер

  • Модератор
  • PipPipPipPip
  • 1 316 сообщений
860

Отправлено 04 Апрель 2015 - 23:49

Здравствуйте.

Вот заходишь на некоторые сайты, а там вылазит окошко, типа подпишись на рассылку, лайкни в соцсетях и т.д.
Подскажите, пожалуйста, как это реализуется? Т.е. должно быть:

1. затенение фона;
2. отображение кастомного div;
3. кнопочка закрыть обязательно для уменьшения нервозности.

Может, кто живой скрипт видел где качнуть?
Есть еще идея сделать body onload и уже готовый лайтбокс пускать, там как бы и крестик на закрытие, и затенение, и все, что хошь, но туда уже ни текстовое поле не вставить, ничего, остается только вариант показывать глупую картинку. А я не хочу глупую, я хочу веселую! С Самоделкиным и Чиполлино!

В общем, прошу высказать ваши мысли, господа!
F4KIN HATE SEO

#2 Valek

Valek

    ВСтатусе

  • Активный участник
  • PipPipPipPip
  • 1 456 сообщений
2 077
  • ИзРоссии :(

Отправлено 05 Апрель 2015 - 11:06

Так это любой попапмдер взять. в сети полно скриптов, и переделать под себя.

Просмотр сообщенияEl Marshal Che сказал:

1. затенение фона; 2. отображение кастомного div; 3. кнопочка закрыть обязательно для уменьшения нервозности.
1. С помощью css обычно решается
2 и 3. Практически стандартно у всех.

Сложность в другом возникает. Настройка и возможность правила работы попандера. Когда должен открыть, через какое время/действий... Закрыться сам или по клику. Показывать только для новых юзеров и/или для старых, для аторизованных или нет. Или просто к сессии или через определенное время, или пожеланию админа.

Переделывал под себя. Без затемнения, но вылазит через 5 сек( анимационный вылазит). После закрытия неделю не показывается(на одном и том же браузере) куку прописывает.
Пример nsks.ru снизу предупреждение о 18+. после нажатия "ДА" окошко попап сворачивается и 7 дней не показывается или пока куку не удалишь
Отличный хостинг низкие цены, высокое качество и SSL Ссылка на сайт

#3 madcap

madcap

    Мастер

  • Старая гвардия
  • PipPipPipPip
  • 948 сообщений
898
  • ИзМосквы

Отправлено 05 Апрель 2015 - 11:38

Без JS - никак.
Погуглите запрос "модальное окно jquery".
Потом, когда разберётесь, можно будет поставить и что-нить поинтересней на jquery, типа http://www.no-margin...lightbox-clone/ - в таком окне можно и товары магазина показывать, и видео крутить и флеш-анимацию откручивать.


Ссылка по теме - http://ru.stackoverf...модальным-окном

#4 El Marshal Che

El Marshal Che

    Мастер

  • Модератор
  • PipPipPipPip
  • 1 316 сообщений
860

TC Отправлено 05 Апрель 2015 - 14:01

Valek, да мне даж не надо никакую рекламу откручивать, мне хочется, чтобы просто div красиво вылазил с возможностью закрытия, без онкликов, документ.реферреров и прочего. Но за скрипт попандера скажу спасибо, сколько ни искал, так и не нашел толкового (только бородатые какие-то, уже не рабочие).

madcap, вы подсказали интересное и несложное решение, но вот как сделать так, чтобы оно всплывало сразу при загрузке страницы? Кук и прочих штук не надо, решение должно быть простым и надежным. Я, повторюсь, своим умом только до body onload могу додуматься, но сработает ли такая конструкция? Как еще можно заставить что-то включаться вместе со стартом страницы?

Спасибо.
F4KIN HATE SEO

#5 isay777

isay777

    смурфосеошнег

  • Модератор
  • PipPipPipPipPip
  • 2 287 сообщений
2 440
  • ИзМосква

Отправлено 05 Апрель 2015 - 14:35

El Marshal Che,
http://tristanedwards.me/sweetalert
мое портфолио - Дешевый и надежный хостинг c SSD --- СНИМАЕМ ПОЗИЦИИ ЧЕТКО

#6 neskor

neskor

    Продвинутый

  • Участник
  • PipPipPip
  • 249 сообщений
148
  • ИзУльяновск (в данную минуту)

Отправлено 05 Апрель 2015 - 15:10

Может, такое подойдет http://pcvector.net/...uery/index.html ? (http://pcvector.net/...schee-okno.html - описание)

#7 El Marshal Che

El Marshal Che

    Мастер

  • Модератор
  • PipPipPipPip
  • 1 316 сообщений
860

TC Отправлено 05 Апрель 2015 - 15:44

isay777, очень интересная штука! Токо как ее добавить вот прям чтоб при загрузке страницы выстреливало?
neskor, почти оно! На 98% процентов просто. Только в примере там при помощи button закрывается приветствие, а мне надо бы чтобы при клике на всплывающий div он убирался! И тогда вообще в ажуре все будет!

Спасибо, ребят, очень помогли, буду разбираться со всем этим великолепием ;)
F4KIN HATE SEO

#8 Valek

Valek

    ВСтатусе

  • Активный участник
  • PipPipPipPip
  • 1 456 сообщений
2 077
  • ИзРоссии :(

Отправлено 05 Апрель 2015 - 17:06

Может

Просмотр сообщенияEl Marshal Che сказал:

а мне надо бы чтобы при клике на всплывающий div он убирался!
через событие onclick например или через другое
http://htmlbook.ru/html/attr/onclick
Отличный хостинг низкие цены, высокое качество и SSL Ссылка на сайт

#9 El Marshal Che

El Marshal Che

    Мастер

  • Модератор
  • PipPipPipPip
  • 1 316 сообщений
860

TC Отправлено 05 Апрель 2015 - 19:01

Да, но есть еще и задача как этот самый div выпятить при загрузке страницы :D
F4KIN HATE SEO

#10 El Marshal Che

El Marshal Che

    Мастер

  • Модератор
  • PipPipPipPip
  • 1 316 сообщений
860

TC Отправлено 07 Апрель 2015 - 00:49

Еще раз прошу вашей помощи.
Вроде отрыл то, что мне нужно, пример тут: http://snipcode.ru/c....html?snipid=28

Все работает, при загрузке страницы див отображается, но - после истечения таймаута он сворачивается.
Подскажите, пожалуйста, как заменить сворачивание по таймауту на сворачивание по щелчку на кнопку "закрыть окно" (текстовая ссылка которая будет во всплывающем диве).

Спасибо!
F4KIN HATE SEO

#11 Valek

Valek

    ВСтатусе

  • Активный участник
  • PipPipPipPip
  • 1 456 сообщений
2 077
  • ИзРоссии :(

Отправлено 07 Апрель 2015 - 04:22

Просмотр сообщенияEl Marshal Che сказал:

Еще раз прошу вашей помощи.
Вот по быстрому накидал . Кликаешь на любую область окошечка и оно уезжает

http://jsfiddle.net/krenjea3/

C CSS еще поработать надо.
______
upd
слегка подправил. Теперь ваще при клике на любую область окна и затемнения - окошечко уезжает
Отличный хостинг низкие цены, высокое качество и SSL Ссылка на сайт

#12 El Marshal Che

El Marshal Che

    Мастер

  • Модератор
  • PipPipPipPip
  • 1 316 сообщений
860

TC Отправлено 07 Апрель 2015 - 08:40

Valek, ниче се "по-быстрому"! )
Спасибо вам большое, все как надо!
F4KIN HATE SEO

#13 KaSH

KaSH

    Инструктор по счастью

  • Основатель
  • PipPipPipPip
  • 1 355 сообщений
2 446
  • Изморя и с гор

Отправлено 07 Апрель 2015 - 11:47

Ну и задача :) Там дел-то...
Люди, ну потратьте вы полдня на чтение книжки по HTML + CSS3 , и еще полдня на основы как работать с jquery - работать сразу станет легче )))
Там никакого матана нет.

Сорри за оффтоп, не удержался.
Серьезные сайты размещаю на VPS, простые в SprintHost и в TimeWeb. Старые, более ненужные мне сайты я продаю на Телдери. Бухгалтерию и отчеты в налоговую за меня делает Эльба.

#14 El Marshal Che

El Marshal Che

    Мастер

  • Модератор
  • PipPipPipPip
  • 1 316 сообщений
860

TC Отправлено 07 Апрель 2015 - 12:39

KaSH, В HTML+CSS-то я шарю, куда без этого, но скрипты и код для меня это только на уровне загуглить и поправить закорючку...
По поводу "основ работы" - обязательно прочту, надеюсь, это действительно просто. Не подступал к теме в том числе из-за кажущейся для меня сложности, талмудов меньше 700 страниц по яваскрипту не встречал :blink:

И никаких "соррь", все по делу, спасибо!
F4KIN HATE SEO

#15 KaSH

KaSH

    Инструктор по счастью

  • Основатель
  • PipPipPipPip
  • 1 355 сообщений
2 446
  • Изморя и с гор

Отправлено 07 Апрель 2015 - 14:12

Просто все эти окошки - это один див с прозрачностью, фиксированным позиционированием, и размерами 100%.
<div id="overlay"></div>
#overlay{
position: fixed;
background-color: #000;
opacity: 0.5; /* прозрачность: 1- не прозрачный, 0 - полностью прозрачный */
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1001;
}
Окно - это тоже div, у которого z-index больше чем у div overlay
Позиционируем его либо фиксированно, либо абсолютно.
Оформляем по вкусу.
<div id="modal"></div>
#modal{
width: 600px;
background: #ffffff;
color: #222222;
position: absolute;
top: 50px;
left: 50%;
margin-left: -300px;
padding: 0;
z-index: 2000;
border: 10px solid #333333;
}

Тут вообще пока никакого js и в помине.
Понятно, в этот самый modal можно пхать нужный контент. В том числе и нопочку закрытия, которую можно позиционировать относительно него как угодно.

А после - уличная магия :) JQuery.

$(document).ready(function(){

	$('#overlay').click(function(){  // то бишь, по клику на элемент с id overlay выполнить
		$('#modal').hide(); // скрыть элемент с id modal
		$('#overlay').hide(); // скрыть элемент с id overlay
	});

});

Все. весь твой код. :) Согласись - это не то что не сложно - это просто детский сад.
Думаю, тут понятно, как сделать и кнопочку в окошке, которая все это закроет? =)))
JQuery - это не для программистов. Это специально для вебмастеров. Там нечего бояться.

Потом сверху можно накручивать - например, показывать это только тем, у кого есть определенная кука, или кто не видел еще этого окошка. Можно что-то сохранять в куках, что-то в сессии пользователя и т.п. И даже там будет все крайне просто. И не нужно будет ставить никаких адских примочек в 100500 килобайт.
Серьезные сайты размещаю на VPS, простые в SprintHost и в TimeWeb. Старые, более ненужные мне сайты я продаю на Телдери. Бухгалтерию и отчеты в налоговую за меня делает Эльба.



Похожие темы


Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных



© 2021 SMO&SEO форум «WEBIMHO» — продвижение и создание сайтов, интернет-маркетинг

По вопросам рекламы на форуме и цены на рекламу
Все материалы SEO форума разрешены к копированию только с установкой гиперактивной ссылки на webimho.ru,
тем, кто этого не сделает, мы оторвем руки и ноги и поменяем местами,
а когда выйдем из тюрьмы, опять оторвем и опять поменяем.


Россия, г. Москва
  • Top.Mail.Ru

Мы в соцсетях: twitter | вконтакте | facebook | livejournal