Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
 
1 / 1 / 0
Регистрация: 13.03.2011
Сообщений: 17
1

Создание новых всплывающих окон

21.03.2014, 16:16. Показов 551. Ответов 0
Метки нет (Все метки)

Вопрос таков- необходимо реализовать вывод на экран новых окон с сообщениями (по типу того как в vk.com) по нажатию на кнопку.
Подскажите хотя бы логику - нужны ли клепать новые классы или же можно обойтись одним?

по заданию это окно через N-ое кол-во времени исчезает либо - его можно зафиксировать (Это я уже сделал)

прикладываю мой текущий код

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
var text;
function go(){
    text=window.document.getElementById("my-text").value;
    window.document.getElementById("my-text").value="";
    if (text!="") {goWindow();}
    else {alert("Выничего не ввели!")}
 
}
function goWindow(){
    $('.panel').append('<h1>'+text+'</h1>');
    $('.panel').fadeIn('slow');
    var myTimer;
    var n = 6000; //Количество секунд пока висит окно
    myTimer = setTimeout(function(){$('.panel').fadeOut('slow');},n);  //исчезание через N секунд
 
    $(".panel .close").click(function(){
        $(this).parents(".panel").animate({ opacity: 'hide' }, "slow");
        clearTimeout(myTimer);
    });
 
    $(".panel .lock").click(function(){
        clearTimeout(myTimer);
        $(".panel .timer").animate({ opacity: 'hide' }, "fast");
        $(".panel .lock").css({
            'background-image':'url("lock_on.png")'
        })
    });        //заменяет картинку & останавливает таймер & прячет счетчик после нажатия
 
    function countdown() {
        var currentsecond=n/1000+1;
        function countredirect(){       //счиитает в обратном порядке и выводит на экран
            if (currentsecond!=1){
                currentsecond-=1;
                $(".panel .timer").val(currentsecond);
            }
            else{
                $(".panel .timer").val(0)
                return;
            }
            setTimeout(countredirect,1000);
        }
        countredirect() //перезапускает сама себя для отсчета секунд
    }   // ТАЙМЕР
    countdown();
    }
Добавлено через 4 часа 51 минуту
Все - разобрался! Если кому интересно приложил свой код.

Кликните здесь для просмотра всего текста

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
26
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Dunice Study. Task 4</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <script type="text/javascript" src="jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="script.js"></script>
</head>
<body>
 
    <div id="wrap">
        <input id="my-text" type="text" autofocus />
        <button class="go">Do it!</button>
    </div>
 
<!-- ############ Закрывающиеся блоки ##### -->
    <div class="popup">
        <script type="text/template">
 
        </script>
    </div>
<!-- ###################################### -->
 
</body>
</html>
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
jQuery(function (){
 
    var text;
 
    console.log('Ready');
 
    $('#my-text').on('keyup', function(e) {
        if (e.which === 13) {
            e.preventDefault();
            enter();
        }
    });
 
 
    function enter() {
        text = $("#my-text").val();
        $("#my-text").val('');
        if (text!="") {goWindow();}
        else {alert("Выничего не ввели!")}
    }
    $(".go").on("click", enter);
 
 
    function onPanelClick(callback) {
        return function() {
            var panel = $(this).parent(".panel");
            clearTimeout(panel.data("timer"));
            callback.call(this, panel);
        }
    }
 
    $(".popup")
        .on("click", ".panel .close", onPanelClick(function(panel) {
            panel.animate({ opacity: 'hide' }, "slow");
            $(".popup")[0].removeChild(panel[0]);
        }))
        .on("click", ".panel .lock", onPanelClick(function(panel) {
            panel.find(".timer").animate({ opacity: 'hide' }, "fast");
            $(this).css({'background-image':'url("lock_on.png")'});
        }));
 
 
    function goWindow() {
        var template = '<div class="panel" style="display: block">'+
            '<span class="close"></span>'+
            '<span class="lock"></span>'+
            '<input class="timer" type="text" readonly>'+
            '</div>';
        // Append template
 
        $(".popup").append(template);
        var id = new Date().getTime();
        $(".popup .panel:last").attr("id", id);                 //присваеваем каждому нового блоку id
        $('.popup .panel#'+id).append('<h1>'+text+'</h1>');     //вставляем текст
        $('.popup .panel#'+id).fadeIn('slow');                  //выводвим окно
        var n = 10000;                                          //Количество милисекунд пока висит окно
        var myTimer = setTimeout(function(){
            $('.popup .panel#'+id).fadeOut('slow');
            $('.popup .panel#'+id).remove();
 
        },n);  //исчезание через N секунд
        $('.popup .panel#'+id).data("timer", myTimer);
 
        function countdown() {
            var currentsecond=n/1000+1;
            function countredirect(){       //счиитает в обратном порядке и выводит на экран
                if (currentsecond!=1){
                    currentsecond-=1;
                    $('.popup .panel#'+id).find(".timer").val(currentsecond);
                }
                else{
                    $('.popup .panel#'+id).find(".timer").val(0)
                    return;
                }
                setTimeout(countredirect,1000);
            }
            countredirect(); //перезапускает сама себя для отсчета секунд
        }   // ТАЙМЕР
        countdown();
    };
 
});
1
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
21.03.2014, 16:16
Ответы с готовыми решениями:

Создание всплывающих картинок
Здравствуйте, подскажите пожалуйста, люди добрые, хочу сделать для сайта такую фишку: пока...

Проверка на разрешение всплывающих окон
Сабж. Тоесть нужен способ проверки разрешения всплывающих окон в IE, просто со вторым сервис паком...

Несколько всплывающих окон на странице
всем привет. есть подобное всплывающее окно. когда оно одно на странице - работает идеально. ...

Как отменить блокировку всплывающих окон?
Здравствуйте. Не думал, что это будет проблематично, но при получении определенного ответа от...

0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
21.03.2014, 16:16

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Форма авторизации в виде всплывающих окон "prompt"
У меня есть задание, сделать условную форму авторизации. (ввести заданные логин и пароль) Я...

Не работает код открытия новых окон браузера
Не могу понять где ошибка. Должно открыться 9 окон размером 200x100 по нажатию на Открытие. Но либо...

Awesomium запретить создание новых окон
Есть сайт который через определенный промежуток времени через js открывает новое окно, мне надо...

Блокировка всплывающих окон???
Господа!!! Помогите!!! Нигде не могу найти как самостоятельно написать утилитку для блокировки...

Стиль всплывающих окон
Привет всем, Ребята подскажите какой стиль отвечает за всплывающие окна или что вообще за это...

Настройка всплывающих окон
Здравствуйте! Подскажите, пожалуйста, материал, где подробно изложен материал по JOptionPane, с...


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

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

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