• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Всплывающая форма входа на сайт uCoz
Всплывающая форма входа на сайт uCoz
workman
Вторник, 26 Сентября 2017 | Сообщение 1
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Решил я как-то посмотреть что школята-рипы выкладывать стали на данный сайт и чуток в своих слезах от смеха не утонул. А дело в том что если вы посмотрите в эту тему и тем более попытаетесь скачать файл для установки, то спешу вас разочаровать, шо, то что там лежит, вроде как и работает, НО только вот коды тяжелы шо страсть 04b ... Решил я немного воспользовавшись своим и так загруженным временем уделить немного для тех кто хочет поставить себе такой блок с формой входа и написал свои коды стилей и JS скрипта, которую я думаю что оцените подобающе 04b Ну что-то я тут развел демагогию .. Начнем.

Итак... Вот этот код ставим по месту вызова. И кстати, обратите внимание что это не ссылка а именно html код вызова/

Код
<?if($USER_LOGGED_IN$)?><a href="$LOGOUT_LINK$">Выход</a><?else?><span id="but" data-for="w1">Вход</span><?endif?>


Далее создаем в блокноте файл с названием but-min.js и впихуем туда что-то для некоторых,что-то непонятное, но называется это скриптом JS... ))



P.S. - Сжимать онлайн сервисами ничего не нужно, так как сжато уже все и без вас ...
Но если кому и хочется что-то сжать, то можете только "булки" свои, так как дальше самое интересное в установке идет )) Короче ... Вот это все содержимое в файле, заливаем в ФМ (для тех кто в подводной лодке - Файловый Менеджер), берем ссылку на файл JS и вставляем тудЫ, где у меня написано "ссылка"

Код
<script type="text/javascript" src="ссылка"></script>


Далее опять копируем уже сам скрипт и топаем в нижнюю часть сайта и запихуем тудЫ в самый самый низ и не забудьте все это хозяйство сохранить нажав на кнопочку.

С скриптом разобрались. Теперь чуток полегче. 04b

Берем вот эту хрень и вставляем в самый низ таблицы стилей, ну или создаем отдельный файл как указано было выше но только с названием but-min.css (прошу не путать CSS с JS) и если так, то вставляем между head ... /head на всех страницах сайта. Но лучше не заморачиваться и вдуплить в таблицу
Код
<link rel="stylesheet" href="ссылка" />

Код
#but{margin:0px auto;cursor:pointer}
.win1 h2{font-family:Jura-Medium;color:#fff;text-align:center;padding-top:40px;}
.win1-text,.win1-forma p{font-family:Jura-Medium;color:#fff;text-align:center;}
.win1-forma{margin:10px}
.win1-footer{font-family:Jura-Medium;color:#666;padding-top:20px;font-size:13px;text-align:center}
.win1{top:0;right:0;background:#141414;height:100%;width:450px;position:fixed;z-index:999}
.win1-hed{margin:0px 45px;}
.win1-uid a{text-decoration:none;color:#fff;font-weight:500;}
.win1-uid{text-align:center;margin:5vh auto;border:3px solid #4072c5;background:transparent;padding-left:0px;height:61px;line-height:55px;width:255px;border-radius:72px;display:block;font-size:16px;}


Если быть стратегически честным, то я бы сделал именно так - поставил бы отдельным файлом. Почему? А потому что вы будете редактировать стили под себя вообще-то. Вдруг кому захочется такое окно именно зеленым, синим или серо-буро пацарапаным ))

Ну и последнее, это то что вот этот код html вставляем также у самую наизнейшую (не путать с нежностью 11a ) часть вашего детища )
Код
<!-- начало формы входа --><?if($USER_LOGGED_IN$)?><?else?>  
<div class="win1" id="w1" style="display: none;">
  <div class="win1-hed">
  <h2>Вход на сайт</h2>
  <div style="display: inherit;text-align: center;"><img src="/images/logoUcoz.png" border="0" alt="" /></div>
  <div class="win1-text">
  <p>Если Вы впервые на нашем сайте<br>предлагаем создать учетные данные на uID<br> и войти на сайт</p>
  </div>
  <div class="win1-uid"><a href="/register">Создать  uID</a>  </div>
  <div class="win1-forma">
  <p>или войдите через:</p>
  <p>$LOG_FORM$</p>
  </div>
  <div class="win1-footer">Чтобы закрыть форму<br> кликните мышкой в любой части экрана</div>
  </div>
</div><?endif?>
<!-- конец формы входа -->

Ну на этом практически усёёё))
Ах да чуток не забыл. Если кому нужно будет узнать что с данным продуктом можно еще сделать так спрашивайте не стисняясь .. Чем смогу тем помогу!!! Ну или вступайте ко мне в группу в ВК и там будем трендеть, так как сюда я иной раз просто в личке пообщаться со своем братом Админом ))

P.S. Если вы заметили, то я авторство не писал. Догадываюсь что тот кто заберет не будет распинаться всем, что это его движуха ))



Просмотреть ДЕМО как я делал для сайта (ледилинг) - прокрутить вниз до отзывов и покликать по кнопкам поочередно
Прикрепления: 4227304.png (27.6 Kb)


Сообщение отредактировал
workman - Вторник, 26 Сентября 2017, 08:55
Страна: (RU)
DESTEQ
Вторник, 26 Сентября 2017 | Сообщение 2
Оффлайн
Vip
Сообщений:60
Награды: 0
Интересное решение, спасибо, может возьму, чтобы обратную связь сделать таким же способом 04b

Telegram: @desteq
Страна: (RU)
workman
Вторник, 26 Сентября 2017 | Сообщение 3
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Цитата DESTEQ ()
чтобы обратную связь сделать таким же способом

Да этих блоков можно по натыкать сколько угодно на страницу)) Скрипт заточил именно под это
Страна: (RU)
DESTEQ
Вторник, 26 Сентября 2017 | Сообщение 4
Оффлайн
Vip
Сообщений:60
Награды: 0
workman, лишь бы нагрузки не было излишней, а так конечно, сколько угодно можно)

Telegram: @desteq
Страна: (RU)
workman
Вторник, 26 Сентября 2017 | Сообщение 5
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Цитата DESTEQ ()
лишь бы нагрузки не было излишней

Вы наверное не внимательно прочли )) Я скажупростыми словами.
Я сделал одним скриптом и одним файлом стиле сразу хоть на 1000 блоков. Главное чтобы тут
Код
<span id="but" data-for="w1">Вход</span>
на data-for="w1" менять переменную ну и на добавочном шаблоне
Страна: (RU)
DESTEQ
Вторник, 26 Сентября 2017 | Сообщение 6
Оффлайн
Vip
Сообщений:60
Награды: 0
workman, всё, увидел, тогда вообще хорошо 09a

Telegram: @desteq
Страна: (RU)
Kosten
Вторник, 26 Сентября 2017 | Сообщение 7
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
workman, поставить под различные функций - круто получилось.
Страна: (RU)
workman
Вторник, 26 Сентября 2017 | Сообщение 8
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Цитата Kosten ()
поставить под различные функций - круто получилось.

Сомневался ??)) Так еще посмотри у меня на сайте спустившись к отзывом, переменно нажимая то одну то другую кнопку )) Форма одна другой перелистывает в одном месте ...

А ты эаметил, какую я тут простынь выстелил пока написал тему? Думал, что ох..ю Не-нет ... Не то что ты подумал ))) Я имел ввиду именно, практически с намеком на детородный в выражениях орган. И еще в огороде растет ))))


Сообщение отредактировал
workman - Вторник, 26 Сентября 2017, 19:18
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Всплывающая форма входа на сайт uCoz
  • Страница 1 из 1
  • 1
Поиск: