[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форма входа - Вид подтверждения данных
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
Код

Не срабатывает(
Пробовал вставлять как в саму форму, так и на страницу с формой.
 
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
Код

Спасибо большое!) Все замечательно работает!)
 
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;
}
 
  • Страница 1 из 1
  • 1
Поиск: