JQuery: всплывающее окно

Текущая заметка представляет собой простую пошаговую инструкцию по реализации вслывающего окна на JQuery, которое вы в последствии можете прикручивать на свои сайты. Без дополнительных плагинов к библиотеке  с сотнями строк программного кода и стилями, компактное решение.

Всплывающее окно на JQuery

Скачать рабочий пример

1. Подключите библиотеку JQuery к веб-странице. Затем туда же подключите следующий клиентский скрипт на JavaScript:

/* Открываем модальное окно: */
function open_popup(box) { 
  $("#background").show() 
  $(box).centered_popup(); 
  $(box).delay(100).show(1); 
} 

/* Закрываем модальное окно: */
function close_popup(box) { 
  $(box).hide(); 
  $("#background").delay(100).hide(1); 
} 

$(document).ready(function() { 
  /* Позиционируем блочный элемент окна по центру страницы: */
  $.fn.centered_popup = function() { 
    this.css('position', 'absolute'); 
    this.css('top', ($(window).height() - this.height()) / 2 + $(window).scrollTop() + 'px'); 
    this.css('left', ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + 'px'); 
  } 

});

2. CSS идентификатор  #background задает оформление фона во время появления модального окна, а  #modal_window — внешний вид самого всплывающего элемента. Обратите внимание на значение свойств  z-index и position. В итоге стили будут следующими:

#background { 
  left: 0; 
  top: 0; 
  position: absolute; 
  background: #000; 
  opacity: 0.7; 
  z-index: 999; 
  display: none; 
  height: 100%; 
  width: 100%; 
} 

#modal_window { 
  display: none; 
  z-index: 9999; 
  border: 1px solid #444; 
  background-color: #FEFEFE; 
  border-radius: 10px; 
  padding: 15px 20px; 
  height: 250px; 
  width: 450px; 
}

3. При этом HTML разметка у вас должна содержать, как минимум вот это:

<a onclick="open_popup('#modal_window');" href="#">Открыть окно</a> 
<div id="modal_window"> 
  <a onclick="close_popup('#modal_window');" href="#">Закрыть окно</a> 
  <p>Вот такое вот всплывающее окно на JQuery у вас получится.</p> 
</div> 
<div id="background"></div>

По умолчанию и #background, и  #modal_window будут скрыты.

Опубликовано 18-04-2013 в 20:45


Комментариев к записи: 11

  1. Alex:

    Классная вещь! А можно как-то сделать чтоб при нажатии в любом месте (как на всплывающем окне, так и за его пределами) все обратно закрывалось?

    • Администратор:

      Один из самых простых вариантов это сделать вот так:

      <a onclick="open_popup('#modal_window');" href="#" rel="nofollow">Открыть окно</a>
      <div id="modal_window" onclick="close_popup('#modal_window');">
        <a onclick="close_popup('#modal_window');" href="#" rel="nofollow">Закрыть окно</a>
        <p>Пример скачан с <a href="http://red-book-cms.ru" rel="nofollow">http://red-book-cms.ru </a>.</p>
      </div>
      <div id="background" onclick="close_popup('#modal_window');"></div>
      

      См. в HTML примера.
      P.S. Однако я подозреваю, что это будет немного неправильно с т.з. правильного программирования.

  2. Comeonandroid:

    Хорошая статься, вот только никак не получается сделать следующее:

    На сайт генерируются картинки через foreach, то есть изображения ,а для него и привязанное к нему модальное окно с содержимым. Только пробелма в том, что какую картинку не нажимай всегда вызывается первое модальное окно, помогите решить такую проблему, как привязать модальное окно к содержимому?

  3. Александр:

    Хорошая штука а как сделать прокрутку для большого текста?

    • Администратор:

      CSS. Свойство height у области окошка выставите на заданную высоту, к примеру на 300px.
      Затем свойство oveflow выставите на auto или scroll (HTML справочник посмотрите).

      • Александр:

        Alex:
        26.04.2013 в 03:38
        Классная вещь! А можно как-то сделать чтоб при нажатии в любом месте (как на всплывающем окне, так и за его пределами) все обратно закрывалось?

        и вот ещё,а как сделать подобное закрытие только по клику вне поля а то до слова ЗАКРЫТЬ прокручивать не удобно? Пытался по аналогии с подобными модальными окнами переделать но фиг там если можно то более правильно цитирую тебя P.S. Однако я подозреваю, что это будет немного неправильно с т.з. правильного программирования

  4. Александр:

    Сюда не проходит ещё один вопрос не пойму почему, там ссылка с скриншотом на то что сделал и код 56 строки
    вопрос как её переделать в кнопку как у тебя ОТВЕТ?

  5. Александр:

    аааааааааааа и там спасибо было тебе, во сновном всем авторам наплевать на свои темы через неделю уже а ты ответил

  6. по поводу отключения окна кликом я решил проблемку

  7. При вставке второго всплывающего окна на странице, в нём показывает контент из первого. Как сделать несколько всплывающих окон с разным содержимым на одной странице ?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>











Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Последние твиты