О проектеГостеваяКарта сайта

Предложишь лучшее решение - получишь 100 рублей!

Всплывающее окно при загрузке страницы на jQuery

Две строчки кода позволяют сделать всплывающее окно при загрузке страницы на jQuery. Таким образом можно на некоторое время привлечь внимание пользователя к какой-то информации на странице.

Пример обрабатываемого кода

Подключаем jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Решение

В тег <head> вставляем (вариант 1):
Javascript

<script>
$(document).ready(function() {
setTimeout ("$('#div1').show('drop');", 1000);
setTimeout ("$('#div1').hide('drop');", 3000);
});
</script>
 
еще один вариант
Javascript

<script>
$(document).ready(function() {
setTimeout ("$('#div1').fadeIn('fast');", 1000);
setTimeout ("$('#div1').fadeOut('slow');", 3000);
});
</script>
 
На самой странице, внутри тега <body>
HTML

<div id='div1' style="display: none; position:absolute; top:50%; left:30%; background-color: grey; border: 1px solid lightblue; width: 450px; padding: 10px;"><h2>Вот тут информация, которую мы хотим показать в всплывающем окне</h2></div>
 

setTimeout ("$('#div1').fadeIn('fast');", 1000); 

Разбираем:

  div1 - id блока, который мы будем показывать и прятать

  show или fadeIn - это наш "эффект" с которым будет появляться скрытый div

  hide или fadeOut - это то как он будет прятаться

  1000 - это задержка в миллисекундах (1000 - это одна секунда) момента появления всплывающего окна после загрузки страницы

  3000- это задержка момента, когда мы будем скрывать окно. Т.е. при таком раскладе (1000\3000) окно "провисит" 2 секунды.

Демо работы функции


Рейтинг:

Теги: jQuery всплывающее окно эффект

Если вы знаете более оригинальное, красивое, ЛУЧШЕЕ решение этой задачи, у вас есть шанс заработать 100 рублей!!! Если ваше решение будет признано лучшим, деньги ваши! Мы гарантируем выплату!

Всего 5 комментариев

< !-- @form -- >

Подписаться на новые комментарии?

%form_captcha%

*Обзазательны для заполнения

PHP

 

Последние комментарии
  • phpguru

    Функция отличная только надо бы добавить для utf8 кодировку обработать строку, а то не все понимают как сделать подобное!
    $str = iconv_strlen($str,'UTF-8');
    Я так считаю!
    13-12-2013 в 12:59:38 ID# 454 посмотреть...


  • SnipCode.ru

    Возможно Вы правы, непонятно только зачем тут iconv_strlen (((
    13-12-2013 в 13:02:55 ID# 455 посмотреть...


  • Сергей

    поторопился, так надо в конце, пардон.
        return $v['pass'];
        }
    return FALSE;
    }

    02-12-2013 в 23:33:41 ID# 377 посмотреть...


  • Сергей

    Думаю все же логичней использовать foreach, т.к. можно промахнуться с ключами, а если массив ассоциативный (я раньше делал ключ = дата и время регистрации), то вообще работать не будет.
     
    function search($array,$login)
    {
       foreach ($array as $k=>$v)
        if($v['login'] == $login){
        return $v['pass'];
        }
    }
    return FALSE;
    Так, на минутку.
    Время исполнения смысла не имеет, авторизация используется 1 раз, если юзер не параноик)))

    02-12-2013 в 23:33:41 ID# 376 посмотреть...


  • Пабло

    Как сделана ваша система рейтинга,с учетом количеством людей,проголосовавших?
    11-11-2013 в 17:04:39 ID# 207 посмотреть...


  • SnipCode.ru

    ну...вобщем то все просто: берем общую оценку, делим на кол-во проголосовавших, получаем рейтинг
    11-11-2013 в 17:07:06 ID# 208 посмотреть...


  • Пабло

    Да,просто у меня возникли проблемы,при сохранении данных,в бд и отображение количество проголосовавших людей,у вас где нибудь на сайте описано как это сделано или будет?
     
    Мне нужна система рейтинга точно такая же как у вас=)
    11-11-2013 в 17:10:56 ID# 209 посмотреть...


  • KorniloFF

    Приведенный код обрезает до первой точки в строке, в случае, если в ней будет их несколько, что не соответствует теме.
    Вот код, обрезающий до последней точки:

    PHP

    $title= preg_replace("/([\s\S.]+)\.\w+$/","$1",$str)
     

    10-11-2013 в 10:45:29 ID# 205 посмотреть...


  • Виктор

    Все отлично работает! Извините , у меня есть задача отрезать после второй и до второй запятой , что нужно поправить в первом примере?
    Спасибо!
    30-09-2013 в 20:34:07 ID# 204 посмотреть...