Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.90/10: Рейтинг темы: голосов - 10, средняя оценка - 4.90
NapalmRain
42 / 42 / 6
Регистрация: 18.05.2010
Сообщений: 671
1

Нужно сделать автоматическое появление модального окна

06.07.2012, 15:37. Просмотров 2031. Ответов 4
Метки нет (Все метки)

Доброго всем времени суток.
Есть такого рода задачка. Пишу сайт. На нём при входе сразу проверяется авторизован пользователь или нет. Если нет, доступ к сайту блокируется и выводится предложение авторизоваться в иде ссылки, нажав на которую, появляется модальное окно с формой входа на сайт.
Сам скрипт:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function() {
$('a.popup').click(function() {
var popupid = $(this).attr('rel');
$('#' + popupid).fadeIn();
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
var popuptopmargin = ($('#' + popupid).height() + 10) / 2;
var popupleftmargin = ($('#' + popupid).width() + 10) / 2;
$('#' + popupid).css({
'margin-top' : -popuptopmargin,
'margin-left' : -popupleftmargin
});
});
$('#fade').click(function() {
$('#fade , #popuprel , #popuprel2 , #popuprel3').fadeOut()
return false;
});
});
Окно:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id='trigger'>
    <a href='#' rel='popuprel' class='popup'><font color=$ff0000><h3>Вы не авторизованы. Войти!</h3></font></a>
    </div>
    <div class='popupbox' id='popuprel'>
        <div id='intabdiv3'>
            <h2>Авторизяция</h2>
            <table>
            <tr>
            <td>Логин:</td><td><input name='login' size=25></td>
            </tr>
            <tr>
            <td>Пароль:</td><td><input name='pass' type=password size=25></td>
            </tr>
            <tr>
            <td colspan=2><input type=submit name='logon' value='Войти'></td>
            </tr>
            <tr>
            <td colspan=2><a href=''>Забыли Пароль?</a> <a href='registration.php'>Регистрация</a></td>
            </tr>
            </table>
        </div>
    </div>
    <div id='fade'></div>
вызов:
HTML5
1
<a href='#' rel='popuprel' class='popup'><font color=$ff0000><h3>Вы не авторизованы. Войти!</h3></font></a>
Подскажите пожалуйста, каким образом сделать так, чтоб это окно автоматически выводилось вместо предложения нажать на ссылку?
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
06.07.2012, 15:37
Ответы с готовыми решениями:

Появление модального окна через какое-то время
Всем привет! Вопрос такой, есть код $(document).ready(function(){ var pp = $(&quot;#pp&quot;), ...

Как сделать плавную задержку модального окна
Привет всем. У меня есть скрипт модального окна, но я столкнулся с проблемой задержки его, ну что...

Как сделать появление модального окна после просмотра видео?
Мне нужно что бы после просмотра видео открывалось модальное окно. Но только в том случае если...

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

Появление модального окна при нажатии кнопки
Здравствуйте, я совсем новичёк в js - программировании, поэтому обращаюсь за советом на форум. ...

4
suharik
260 / 246 / 57
Регистрация: 03.09.2010
Сообщений: 805
06.07.2012, 16:43 2
Каким образом сайт блокируется? Сам блокиратов формируется на стороне пхп?
Если так то при создании блока в пхп, сделайте любой флаг который будет показывать джаваскрипту что надо открыть модальное окно.
наример
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id='trigger'>
 <input type='hidden' value=1 id="flag">
    </div>
    <div class='popupbox' id='popuprel'>
        <div id='intabdiv3'>
            <h2>Авторизяция</h2>
            <table>
            <tr>
            <td>Логин:</td><td><input name='login' size=25></td>
            </tr>
            <tr>
            <td>Пароль:</td><td><input name='pass' type=password size=25></td>
            </tr>
            <tr>
            <td colspan=2><input type=submit name='logon' value='Войти'></td>
            </tr>
            <tr>
            <td colspan=2><a href=''>Забыли Пароль?</a> <a href='registration.php'>Регистрация</a></td>
            </tr>
            </table>
        </div>
    </div>
    <div id='fade'></div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(document).ready(function() {
 
 
function myFoo() {
var popupid ='popuprel';
$('#' + popupid).fadeIn();
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
var popuptopmargin = ($('#' + popupid).height() + 10) / 2;
var popupleftmargin = ($('#' + popupid).width() + 10) / 2;
$('#' + popupid).css({
'margin-top' : -popuptopmargin,
'margin-left' : -popupleftmargin
});
}
 
$('#fade').click(function() {
$('#fade , #popuprel , #popuprel2 , #popuprel3').fadeOut()
return false;
});
 
var flag=$('#flag').val();
if(flag==1){
  myFoo();
}
});

Ну примерно так.
1
NapalmRain
42 / 42 / 6
Регистрация: 18.05.2010
Сообщений: 671
06.07.2012, 17:43  [ТС] 3
Благодарю. Более, чем исчерпывающе!
По этому поводу ещё вопрос но в другую сторону. Реально ли после ввода данных и нажатия на отправку данных сделать так, что б эти данные обработались без перезагрузки страницы и выдали результат?
Слышал, что это реализуется через ajax, но я в нём, как и в jquery полный профан. Всегда работал без этих наворотов, а тут вдруг понадобилось.
0
suharik
260 / 246 / 57
Регистрация: 03.09.2010
Сообщений: 805
06.07.2012, 18:00 4
реально. Нпример так.
Ставиш событие onSubmit на отправку формы и пишеш функцию которая будет отправлять данные на сервер
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div id='trigger'>
 <input type='hidden' value=1 id="flag">
    </div>
    <div class='popupbox' id='popuprel'>
        <div id='intabdiv3'>
   <form id="myForm" onSubmit = 'myAjaxFoo(); return false;'>
            <h2>Авторизяция</h2>
            <table>
            <tr>
            <td>Логин:</td><td><input name='login' size=25></td>
            </tr>
            <tr>
            <td>Пароль:</td><td><input name='pass' type=password size=25></td>
            </tr>
            <tr>
            <td colspan=2><input type=submit name='logon' value='Войти'></td>
            </tr>
            <tr>
            <td colspan=2><a href=''>Забыли Пароль?</a> <a href='registration.php'>Регистрация</a></td>
            </tr>
            </table>
</form>
        </div>
    </div>
    <div id='fade'></div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
$(document).ready(function() {
 
 
function myFoo() {
var popupid ='popuprel';
$('#' + popupid).fadeIn();
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
var popuptopmargin = ($('#' + popupid).height() + 10) / 2;
var popupleftmargin = ($('#' + popupid).width() + 10) / 2;
$('#' + popupid).css({
'margin-top' : -popuptopmargin,
'margin-left' : -popupleftmargin
});
}
 
function myAjaxFoo(){
        $.ajax({
            url: 'login.php',
            dataType: 'html',
            type: 'post',
            async: false,
                        data:$('#myForm').serialize(),
            success: function(resp){  
                            if(resp==1){
                                   alert('Успешно авторизировались, Сейчас мы обновис страницу');
                                   window.location.reload();
                             }else{
                                alert('Авторизацию не прошли');
                             }
                         
                }
            
        });
 
}
 
$('#fade').click(function() {
$('#fade , #popuprel , #popuprel2 , #popuprel3').fadeOut()
return false;
});
 
var flag=$('#flag').val();
if(flag==1){
  myFoo();
}
});
Создаеш фаил login.php
Там принимаеш данные методом POST
Работаеш с данными (например залогиниваешся) и потом пишеш
PHP
1
2
3
4
5
6
7
8
9
<?php
/*******
Работаем с данными и тд
********/
///Если все данные успешно отработали и прошли авторизацию, возвращаем аяксу 1
echo 1; 
// Если не прошли авторизацию или что-то пошло не так, выводим 0
 
?>

Как-то так))
1
NapalmRain
42 / 42 / 6
Регистрация: 18.05.2010
Сообщений: 671
09.07.2012, 09:17  [ТС] 5
И снова благодарю. Механизм понял, дальше буду ковырять.
0
09.07.2012, 09:17
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
09.07.2012, 09:17

Автоматическое открытие модального окна
есть кнопка по которой открывается окно &lt;button type=&quot;button&quot; class=&quot;btn btn-primary btn-lg&quot;...

Что нужно знать при создании модального окна и отображении в нем ajax запроса
Доброго времени суток. Растолкуйте мне бестолковому. Я хочу вывести контент получаем через ajax...

Сделать модуль авторизации-регистрации-восстановления пароля в виде модального окна
Решил сделать модуль авторизации-регистрации-восстановления пароля в виде модального окна с...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru