Текущая заметка представляет собой простую пошаговую инструкцию по реализации вслывающего окна на 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 будут скрыты.
Классная вещь! А можно как-то сделать чтоб при нажатии в любом месте (как на всплывающем окне, так и за его пределами) все обратно закрывалось?
Один из самых простых вариантов это сделать вот так:
<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="/" rel="nofollow">https://red-book-cms.ru </a>.</p> </div> <div id="background" onclick="close_popup('#modal_window');"></div>См. в HTML примера.
P.S. Однако я подозреваю, что это будет немного неправильно с т.з. правильного программирования.
Хорошая статься, вот только никак не получается сделать следующее:
На сайт генерируются картинки через foreach, то есть изображения ,а для него и привязанное к нему модальное окно с содержимым. Только пробелма в том, что какую картинку не нажимай всегда вызывается первое модальное окно, помогите решить такую проблему, как привязать модальное окно к содержимому?
Покажите ваш полный код.
Хорошая штука а как сделать прокрутку для большого текста?
CSS. Свойство
heightу области окошка выставите на заданную высоту, к примеру на 300px.Затем свойство
oveflowвыставите на auto или scroll (HTML справочник посмотрите).и вот ещё,а как сделать подобное закрытие только по клику вне поля а то до слова ЗАКРЫТЬ прокручивать не удобно? Пытался по аналогии с подобными модальными окнами переделать но фиг там если можно то более правильно цитирую тебя P.S. Однако я подозреваю, что это будет немного неправильно с т.з. правильного программирования
Сюда не проходит ещё один вопрос не пойму почему, там ссылка с скриншотом на то что сделал и код 56 строки
вопрос как её переделать в кнопку как у тебя ОТВЕТ?
аааааааааааа и там спасибо было тебе, во сновном всем авторам наплевать на свои темы через неделю уже а ты ответил
по поводу отключения окна кликом я решил проблемку