|
Форма входа - Вид подтверждения данных
|
|
| fomir | Дата: Вторник, 28.10.14, 11:32:38 | Сообщение # 1 |
|
Рядовой
Группа: Чатер
Сообщений: 15
Награды: 0
Репутация: 0
Замечания: 0%
Статус: Offline
| Привет мужики)
Сегодня задался вопросом - как можно изменить Вид подтверждения данных в форме входа?
Я сделал отдельную страницу с формой, и когда нажимаю Вход, то появляется серая сетка, а потом появляется в левом верхнем углу галочка, мол всё ок...
Так вот это можно изменить? Чтобы вместо сетки блок становился полупрозрачным, а появляющуюся галочку изменить на более красивую и большую, и переместить её в Центр формы?
|
| |
| |
| Apocalypse | Дата: Вторник, 28.10.14, 11:36:52 | Сообщение # 2 |
|
Подполковник
Группа: Администратор
Сообщений: 107
Награды: 1
Репутация: 11
Статус: Offline
| fomir, дай ссылку на свою страницу с формой входа
|
| |
| |
| fomir | Дата: Вторник, 28.10.14, 11:39:41 | Сообщение # 3 |
|
Рядовой
Группа: Чатер
Сообщений: 15
Награды: 0
Репутация: 0
Замечания: 0%
Статус: Offline
| Цитата Apocalypse fomir, дай ссылку на свою страницу с формой входа
Вот, держи
|
| |
| |
| fomir | Дата: Вторник, 28.10.14, 11:43:35 | Сообщение # 4 |
|
Рядовой
Группа: Чатер
Сообщений: 15
Награды: 0
Репутация: 0
Замечания: 0%
Статус: Offline
| я вообще хотел как-то сделать, чтобы вся эта красота появлялась поверх сайта, с небольшим затемнением вокруг, только вот не разобрался как это сделать... Альтернативная форма на Ajax окнах Ucoz, только со своим стилем... и она не годится)
В скупе двух этих затей - было бы просто восхитительно) Я над графикой сижу работаю, представляю себе, как это выглядит) Но как обычно - с кодом не дружу) Графика и CSS - моя стеза)
|
| |
| |
| Apocalypse | Дата: Вторник, 28.10.14, 11:56:56 | Сообщение # 5 |
|
Подполковник
Группа: Администратор
Сообщений: 107
Награды: 1
Репутация: 11
Статус: Offline
| fomir, вот так можно попробовать:Код $(document).ready(function() {
$('form[id^="frmLg"]').attr('onsubmit', 'apologin();return false;');
});
function apologin() {
$.post('/index/sub', $('form[id^="frmLg"]').serialize(), function(s) {
if($(s).text().indexOf('пароль') == -1) {
// Тут любое действие при успешной авторизации
} else {
// Тут любое действие при ошибке авторизации
}
});
} |
| |
| |
| Apocalypse | Дата: Вторник, 28.10.14, 12:04:46 | Сообщение # 6 |
|
Подполковник
Группа: Администратор
Сообщений: 107
Награды: 1
Репутация: 11
Статус: Offline
| fomir, функции эти я уже протестировал на твоём сайте через консоль - всё работает как часики. Правда, на успешную авторизацию не проверил, так как нет у меня там профиля
|
| |
| |
| fomir | Дата: Вторник, 28.10.14, 12:11:02 | Сообщение # 7 |
|
Рядовой
Группа: Чатер
Сообщений: 15
Награды: 0
Репутация: 0
Замечания: 0%
Статус: Offline
| Именно действие? Мне лишь показать надо будет картинку, в любом из вариантов)
Если ошибка - отобразить картинку №2 ( там будет крестик ), и потом убрать её, через 3 секунды, для ещё одной попытки ввода
Если успешно - отобразить картинку №1 ( там будет галочка ), после которой надо обновить страницу, через 3 секунды, дабы человек мог пользоваться сайтом под своим логином.
Вот такое можно прописать в комментах к действиям?
|
| |
| |
| Apocalypse | Дата: Вторник, 28.10.14, 12:13:45 | Сообщение # 8 |
|
Подполковник
Группа: Администратор
Сообщений: 107
Награды: 1
Репутация: 11
Статус: Offline
| fomir, ты jQuery или яваскрипт вообще знаешь?
|
| |
| |
| fomir | Дата: Вторник, 28.10.14, 12:17:18 | Сообщение # 9 |
|
Рядовой
Группа: Чатер
Сообщений: 15
Награды: 0
Репутация: 0
Замечания: 0%
Статус: Offline
| Цитата Apocalypse fomir, ты jQuery или яваскрипт вообще знаешь?
К сожалению нет) Только помидорами в меня не кидайтесь)))
|
| |
| |
| Apocalypse | Дата: Вторник, 28.10.14, 12:26:26 | Сообщение # 10 |
|
Подполковник
Группа: Администратор
Сообщений: 107
Награды: 1
Репутация: 11
Статус: Offline
| Цитата fomir Если ошибка - отобразить картинку №2 ( там будет крестик ), и потом убрать её, через 3 секунды, для ещё одной попытки ввода
Если успешно - отобразить картинку №1 ( там будет галочка ), после которой надо обновить страницу, через 3 секунды, дабы человек мог пользоваться сайтом под своим логином Код function apologin() {
$.post('/index/sub', $('form[id^="frmLg"]').serialize(), function(s) {
if($(s).text().indexOf('пароль') == -1) {
$('.class1').show(); // Показываем картинку с классом class1
setTimeout("location.replace('/')", 3000); // Редирект через 3 сек. на главную страницу
} else {
$('.class2').show(); // Показываем картинку с классом class2
setTimeout("$('.class2').fadeOut(300);", 3000); // Скрываем картинку с классом class2 через 3 сек
}
});
} |
| |
| |
| fomir | Дата: Вторник, 28.10.14, 12:43:02 | Сообщение # 11 |
|
Рядовой
Группа: Чатер
Сообщений: 15
Награды: 0
Репутация: 0
Замечания: 0%
Статус: Offline
|
Не срабатывает(
Пробовал вставлять как в саму форму, так и на страницу с формой.
|
| |
| |
| Apocalypse | Дата: Вторник, 28.10.14, 12:45:30 | Сообщение # 12 |
|
Подполковник
Группа: Администратор
Сообщений: 107
Награды: 1
Репутация: 11
Статус: Offline
| fomir, вставляй на страницу с формой после </head>
|
| |
| |
| fomir | Дата: Вторник, 28.10.14, 12:49:12 | Сообщение # 13 |
|
Рядовой
Группа: Чатер
Сообщений: 15
Награды: 0
Репутация: 0
Замечания: 0%
Статус: Offline
| Цитата Apocalypse fomir, вставляй на страницу с формой после </head>
Так тоже не срабатывает, посмотри, убирать пока не буду.
Скорее всего я успел уже где-то напортачить)))
|
| |
| |
| Apocalypse | Дата: Вторник, 28.10.14, 12:50:44 | Сообщение # 14 |
|
Подполковник
Группа: Администратор
Сообщений: 107
Награды: 1
Репутация: 11
Статус: Offline
| fomir, а куда дел первую часть кода, которую я давал?Код $(document).ready(function() {
$('form[id^="frmLg"]').attr('onsubmit', 'apologin();return false;');
}); |
| |
| |
| Apocalypse | Дата: Вторник, 28.10.14, 12:54:49 | Сообщение # 15 |
|
Подполковник
Группа: Администратор
Сообщений: 107
Награды: 1
Репутация: 11
Статус: Offline
| fomir, почему у тебя такая конструкция?Код <div style="display:none"><img class="Login_True" src="/icons/login_true.png" /><img class="Login_False" src="/icons/login_false.png" /></div> Код <img class="Login_True" src="/icons/login_true.png" /><img class="Login_False" src="/icons/login_false.png" />
В самый низ css своего добавь:Код .Login_True, .Login_False {
display:none;
} |
| |
| |
| fomir | Дата: Вторник, 28.10.14, 12:56:22 | Сообщение # 16 |
|
Рядовой
Группа: Чатер
Сообщений: 15
Награды: 0
Репутация: 0
Замечания: 0%
Статус: Offline
| Цитата Apocalypse fomir, почему у тебя такая конструкция?
Да привык так прописывать)
Ок, попробую)
|
| |
| |
| fomir | Дата: Вторник, 28.10.14, 13:31:39 | Сообщение # 17 |
|
Рядовой
Группа: Чатер
Сообщений: 15
Награды: 0
Репутация: 0
Замечания: 0%
Статус: Offline
|
Спасибо большое!) Все замечательно работает!)
|
| |
| |
| Apocalypse | Дата: Вторник, 28.10.14, 20:14:32 | Сообщение # 18 |
|
Подполковник
Группа: Администратор
Сообщений: 107
Награды: 1
Репутация: 11
Статус: Offline
| fomir, на здоровье! Тему в архив?
|
| |
| |
| fomir | Дата: Среда, 29.10.14, 13:27:53 | Сообщение # 19 |
|
Рядовой
Группа: Чатер
Сообщений: 15
Награды: 0
Репутация: 0
Замечания: 0%
Статус: Offline
| Цитата Apocalypse fomir, на здоровье! Тему в архив?
Как хочешь)) Могу оформить Материал для новости) Не мне одному такое пригодится)
К тому же - я кое что поменял) Редирект не на главную страницу, а на Рефер прошлой) Чтобы возвращало в то место, откуда решил зайти) удобно же)
Скрипт заменяющий эффект подтверждения введенных данных в форме входа, на затемнение сайта с отображением настроенного сообщения.
После успешного входа возвращает на предыдущую страницу, обновляя её.
 
На странице входа, после /head ставим:
Код <script> $(document).ready(function() { $('form[id^="frmLg"]').attr('onsubmit', 'apologin();return false;'); }); function apologin() { $.post('/index/sub', $('form[id^="frmLg"]').serialize(), function(s) { if($(s).text().indexOf('пароль') == -1) { $('.Login_True').show(); // Показываем картинку с классом class1 setTimeout("document.location.href = document.referrer", 3000); // Редирект через 3 сек. на главную страницу } else { $('.Login_False').show(); // Показываем картинку с классом class2 setTimeout("$('.Login_False').fadeOut(300);", 3000); // Скрываем картинку с классом class2 через 3 сек } }); } </script> <div class="Login_True" align="center"><img src="ссылка на иконку успешного входа" /><br>Текст успешного входа</div> <div class="Login_False" align="center"><img src="ссылка на иконку ошибки" /><br>Текст ошибки</div>
В ваш CSS документ добавляем:
Код .Login_True, .Login_False {
display:none;
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
padding-top: 200px;
background: rgba(0,0,0,0.7);
background-size: cover;
} |
| |
| |
