Приветствую Вас Прохожий | RSS Воскресенье, 04.12.2016, 21:17
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


Мини-чат
Все вопросы задаем в форуме,
здесь они игнорируются!



Статистика
Онлайн всего: 13
Гостей: 12
Пользователей: 1
LESIYI



Главная » Файлы » Скрипты для uCoz » Скрипты Разное

Плагин SimpleModal окно на JQUERY

Плагин SimpleModal окно на JQUERY Плагин, SimpleModal, окно, JQUERY
Обзор плагина SimpleModal, позиционирование по центру экрана и прочие удобства. Как создать простые красивые модальные окна с помощью jQuery Плагин.Создать модальное окно на JQUERY не составляет никаких проблем

  • Установка jquery модальное окно:
    Для того чтобы плагин заработал его надо подключить:
    Данный код добавляем в <head> JavaScript Данный код библиотек jQuery.
    Code

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
      //select all the a tag with name equal to modal
      $('a[name=modal]').click(function(e) {
      //Cancel the link behavior
      e.preventDefault();
      //Get the A tag
      var id = $(this).attr('href');
      //Get the screen height and width
      var maskHeight = $(document).height();
      var maskWidth = $(window).width();
      //Set heigth and width to mask to fill up the whole screen
      $('#mask').css({'width':maskWidth,'height':maskHeight});
      //transition effect
      $('#mask').fadeIn(1000);
      $('#mask').fadeTo("slow",0.8);
      //Get the window height and width
      var winH = $(window).height();
      var winW = $(window).width();
      //Set the popup window to center
      $(id).css('top', winH/2-$(id).height()/2);
      $(id).css('left', winW/2-$(id).width()/2);
      //transition effect
      $(id).fadeIn(2000);
      });
      //if close button is clicked
      $('.window .close').click(function (e) {
      //Cancel the link behavior
      e.preventDefault();
      $('#mask, .window').hide();
      });
      //if mask is clicked
      $('#mask').click(function () {
      $(this).hide();
      $('.window').hide();
      });
    });
    </script>

    <a href="#dialog" name="modal">Простое модальное окно</a>
    <div id="boxes"> <div id="dialog" class="window">
      Простое модальное окно <br> <span><a href="#" class="close"/>Закрыть его</a> </div> <div id="mask"></div></div>


    В таблицу стилей CSS вставляем в самый низ сам стиль окна:
    Code
    a {color: #333; text-decoration: none; font-size: 25px;}
    a:hover {color:#ccc; text-decoration:none}
    #mask {
      position:absolute;
      left:0;
      top:0;
      z-index:9000;
      background-color:#000; /* Тут выбираем цвет затемнения */
      display:none;
      font-family: Georgia;
      }
    #boxes .window {
      position:absolute;
      left:0;
      top:0;
      width:440px;
      height:200px;
      display:none;
      z-index:9999;
      padding:20px;
      text-align: center;
      font-size: 25px;
      }
    #boxes #dialog {
      width:375px;
      height:203px;
      padding:10px;
      background-color:#ffffff;
      }
    .close {
      float: right;
      margin-top: 148px;
      }
  • Автор\Источник: jquery.com

    Для того что бы скачать архив необходимо зайти на сайт как пользователь.
    Просмотров: 2220 | Рейтинг: 5.0/2 | |Категория: Скрипты Разное | Добавил: мир | Дата: 28.07.2011 | Скачали: 0 | Теги: jQuery, окно, SimpleModal, плагин
    Похожие новости на нашем сайте
    Коментарий к новости

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

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

    Форма входа
    Логин:
    Пароль:


    Поиск


    На форуме

    1 Файловик. Уникальные те...

    0

    2 Куплю сайты в индексе Я...

    1

    3 Куплю сайты с ТИЦ/PR (п...

    9

    4 Предлагаю услуги для ан...

    0

    5 Предлагаю услуги по про...

    0

    6 Комплексный прогон сайт...

    51

    7 Сайт онлайн фильмов на ...

    1

    8 Проблема с таблицей

    9

    9 Отредактировать фото

    2

    10 Уже все перепробовал )

    1


    Подробней о форуме


    Комментарии



    Copyright UcozOn.ru™ © 2008-2016


    Кнопка 88х31 сайта ucozon.ru