» »

Модальное окно как на конструкторе uCoz


Модальное окно как на конструкторе uCoz

Думаю многим пригодиться модальное окно по дизайн как на конструкторе uCoz. Это точно такое как на Ajax стоит у вас на сайте по увеличению изображение. И здесь большой плюс, вам не нужно не чего менять и главное, само окно по своему скрипту очень малое. Что вы можете его выставить под описание или под любой код или информер, все точно так будет выводить, то что вам нужно. Если вы заходите на сайт и у вас не оплачено, то оно появляется, или возьмем админ панель, где также его можно увидеть.

Модальное окно uCoz

Но плюсы вы поняли, но и появление его уже не такое как вы привыкли. Будет ссылка, но чтоб вызвать, и окно будет появляться из написанного и если закрываете, также туда уходить.

Установка:

Но это сама ссылка, ставим так где вам нужно.

Код
<a class="ulightbox" href="#Block">Вызов окна</a>


Но теперь остался сам двигатель, если можно так выразится, вообщем код содержимого в низ сайта устанавливаем.

Код
<div style="display:none" id="Block">  
Здесь ваш текст или изображение, а также то что поставите, так как можно сказать, это продолжение самого конструктора сайта.  
</div>


Вот и все, как говорил, все очень быстро и не так сложно, как на других.
19.05.2016 Просмотров: 400 Комментарий: (14)

Поделиться в социальных сетях

Материал разместил

Комментарий: 14
tsakonter
tsakonter 20.05.2016 08:031
0
Как здесь можно сразу ширину вывести, то не понять, на весь экран делается.
feliksteg
feliksteg 20.05.2016 09:342
0
Так сразу и напишите, кто в теме, можно установить несколько окон, и если да, то как, очень благодарен буду.
Kosten
Kosten 20.05.2016 11:123
0
Не чего у меня не вышло, тут походу стили нужно прописывать, не знаю, может кто другой в курсе.
Angerfist
Angerfist 20.05.2016 11:584
0
Я так понял ширину и длину хотите отрегулировать окна? Вот добавил стили: размеры,цвет фона,отступы
Код

<div id="block" style="display:none; padding: 20px; overflow: auto; background-color:#ffffff; width:350px; height:450px;">
Тут текст,картинка,iframe или ещё что нибудь...
</div>
<a class="ulightbox" href="#block">Картинка,надпись вызова окна</a>


Я сделал с полосой прокрутки,мало ли кому понадобиться, без полосы overflow: hidden;
Сафрон
Сафрон 20.05.2016 14:395
0
Angerfist, то что нужно, и не нужно постороннее модальное окно устанавливать.
Kosten
Kosten 20.05.2016 15:136
0
Angerfist, отлично, теперь можно просто выставлять а не делать по описанию. Но только убрал высоту и поставил авто, там в низу нет не какой кнопки, не думаю что нужно, но кому как, тут главное сам код есть, если на авто, то вот поменял.

Код
<div id="block" style="display:none; padding: 20px; overflow: auto; background-color:#ffffff; width:550px; height:auto;">  
  Описание ваше или изображение  
</div>  
<a class="ulightbox" href="#block">Картинка,надпись вызова окна</a>


Angerfist
Angerfist 20.05.2016 15:519
0
Кстати overflow: auto; background-color:#ffffff; можно вообще убрать, прокрутки и так не будет, а цвет по умолчанию белый. Я просто так для примера показал.
Kosten
Kosten 20.05.2016 16:0412
0
Как понимаю, можно зарубить на темное окно с светлыми тенями.
Angerfist
Angerfist 20.05.2016 16:1013
0
Можно конечно,и кстати у друзей твоего сайта видел давно онлайн генератор модальных окон, веб-мастер юкоз если память не изменяет.
Kosten
Kosten 20.05.2016 16:1614
0
Где то скрипт окна делал и на сайт разместил, но там только под описание как понимаю.
FeStemBer
FeStemBer 20.05.2016 15:207
0
Но это разобрались, но если кому то не одно окно нужно, как теперь с этим разобраться?
Angerfist
Angerfist 20.05.2016 15:498
0
Создать нужно новый идентификатор ID, то есть тот же код но с другим названием типа block-1
Сопрано
Сопрано 20.05.2016 15:5110
0
Не чего, все так просто, так можно и под десяток их создать.
Kosten
Kosten 20.05.2016 15:5411
0
Angerfist, почему то делал id_1 мне казалось что так нужно.) biggrin
avatar