Среда, 04.03.2026, 01:35
Меню сайта
    Форма входа
    Категории раздела
    скрипты для ucoz сайта [3099]
    шаблоны для ucoz скачать [2660]
    Иконки групп для форума [25]
    Графика для сайта [1953]
    шаблоны psd для фотошопа [27]
    кисти для фотошопа [39]
    уроки фотошопа на русском языке [4]
    стили для фотошопа [3]
    шрифты для фотошопа cs4 [12]
    Web-master [3058]
    Поиск
    Календарь
    «  Июль 2009  »
    Пн Вт Ср Чт Пт Сб Вс
      12345
    6789101112
    13141516171819
    20212223242526
    2728293031
    Архив записей
    Наш опрос
    Умеете ли вы писать скрипты для ucoz?
    Всего ответов: 73
    Мини-чат
    200
    Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz
  • Статистика

    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    Главная » 2009 » Июль » 4 » Всплывающие модальные окна при выходе
    18:04
    Всплывающие модальные окна при выходе
    В сегодняшнем уроке Вы узнаете как сделать красивое модальное окно, которое всплывает при попытке посетителя выйти.

    Это довольно интересный пример. Суть заключается в том, что как только посетитель наводит мышку на верхний край сайта (то есть пересекает его в попытке нажать на крестик для закрытия окна) запускается скрипт и выводит окно на экран.

    Все что от нас требуется - это прописать несколько строчек между тегами <head></head>:

    Code
    <link type='text/css' href='basic.css' rel='stylesheet' media='screen' />  
    <script type="text/javascript" src="jquery.min.js"></script>  
      <script type="text/javascript" src="jquery.simplemodal.js"></script>
      <script type="text/javascript" src="init.js"></script>

    Как Вы видите тут мы просто инициализируем jQuery и пару вспомогательных скриптов. Также подключаем таблицу стилей.

    Далее где-нибудь в документе вставляем текст всплывающей подсказки:

    Code
    <div style="display: none; padding: 10px;" id="exit_content">  
    <h1>Goodbye visitor!</h1><h3>Thanks for visiting us!</h3><br />  
    Some additional text here ... lorem ipsum.  
    </div>  

    Вот и вся технология! Суть данного метода заключается в том, что в файле init.js находится инструкция, которая вызывает всплывающее окно как только пользователь достигает последних 5 пикселей сайта. Значение "5" можно заменить на любое произвольное.

    На сегодня все! Всем хорошего вечера!

    Пример (xD не рекламко )

    Категория: скрипты для ucoz сайта | Просмотров: 797 | Добавил: NiKsOn1991 | Рейтинг: 5.0/1
    Всего комментариев: 9
    9 11d  
    0
    в опере раз через раз работает

    8 SVL  
    0
    ту ну мне не нравиться
    1.загружает сайт
    2.раздражает

    6 Jampire  
    0
    Спасибо

    4 NiKsOn1991  
    0
    + ставьте!

    5 BoJIoCaTuK  
    -1
    Ток чёт непонятно куда 2ой код вставлять

    7 NiKsOn1991  
    -1
    между head happy

    3 BoJIoCaTuK  
    -1
    Кульььь

    1 -F-  
    -2
    А скрин!! angry

    2 NiKsOn1991  
    0
    пример

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]