Текущая заметка представляет собой простую пошаговую инструкцию по реализации вслывающего окна на 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
будут скрыты.
Классная вещь! А можно как-то сделать чтоб при нажатии в любом месте (как на всплывающем окне, так и за его пределами) все обратно закрывалось?
Один из самых простых вариантов это сделать вот так:
См. в HTML примера.
P.S. Однако я подозреваю, что это будет немного неправильно с т.з. правильного программирования.
Хорошая статься, вот только никак не получается сделать следующее:
На сайт генерируются картинки через foreach, то есть изображения ,а для него и привязанное к нему модальное окно с содержимым. Только пробелма в том, что какую картинку не нажимай всегда вызывается первое модальное окно, помогите решить такую проблему, как привязать модальное окно к содержимому?
Покажите ваш полный код.
Хорошая штука а как сделать прокрутку для большого текста?
CSS. Свойство
height
у области окошка выставите на заданную высоту, к примеру на 300px.Затем свойство
oveflow
выставите на auto или scroll (HTML справочник посмотрите).и вот ещё,а как сделать подобное закрытие только по клику вне поля а то до слова ЗАКРЫТЬ прокручивать не удобно? Пытался по аналогии с подобными модальными окнами переделать но фиг там если можно то более правильно цитирую тебя P.S. Однако я подозреваю, что это будет немного неправильно с т.з. правильного программирования
Сюда не проходит ещё один вопрос не пойму почему, там ссылка с скриншотом на то что сделал и код 56 строки
вопрос как её переделать в кнопку как у тебя ОТВЕТ?
аааааааааааа и там спасибо было тебе, во сновном всем авторам наплевать на свои темы через неделю уже а ты ответил
по поводу отключения окна кликом я решил проблемку