Главная » CMS » Модальные окна с помощью jQuery и CSS. Своя ширина для каждого окна.

Модальные окна с помощью jQuery и CSS. Своя ширина для каждого окна.

Существует огромное количество различных плагинов — «модальных окон» (попапы). Все они легки в установке и использовании. Например для владельцев WordPress, нужно всего-лишь установить плагин, включить его и готово. Классный плагин . Однако, как и некоторые другие плагины требующие jQuery, работать он у меня отказался. Потому как конфликтует с другими ява-скриптами. Искал как же обойти это недоразумение. Решение откопал, но встраивать его в свой блог передумал. Решил просто делать скрины в ширину 540px, заполняя максимально доступную мне ширину. Но тутор решил опубликовать. Пусть будет в коллекции на всякий случай.

Этот урок не стоит расценивать именно как альтернативу, в случае каких-то конфликтов. Этот пример спокойно может стать твоим основным плагином «модальных окон». Не забывай, что применять его можно не только как всплывающую подсказку для простых ссылок, как показано в демке. А и к уменьшеным копиям изображений, что бы выводить изображение в полном размере. В общем применение найдешь ему сам. ;)

Подключаем :

Использовать прямую ссылку (с сайта googleapis), либо скрипт к себе на сервер, решать тебе. Я всё чаще доверяю именно Google.

Вызов элементов jQuery:

HTML ссылка:

Learn More
  • #?w=500 — отвечает за ширину (в пикселях) всплывающего окна. Изменять значение мы можем как нам угодно;
  • rel — обозначаем в коде ссылки, какое окно должно «всплыть», при нажатии на нее. Название должно соответствовать id нижеуказанного дива;
  • class — говорим браузеру, что здесь рулит jQuery.

HTML всплывающий блок:

CSS:

#fade { /*--Transparent background layer--*/
	display: none; /*--hidden by default--*/
	background: #000;
	position: fixed; left: 0; top: 0;
	width: 100%; height: 100%;
	opacity: .80;
	z-index: 9999;
}
.popup_block{
	display: none; /*--hidden by default--*/
	background: #fff;
	padding: 20px;
	border: 20px solid #ddd;
	float: left;
	font-size: 1.2em;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 99999;
	/*--CSS3 Box Shadows--*/
	-webkit-box-shadow: 0px 0px 20px #000;
	-moz-box-shadow: 0px 0px 20px #000;
	box-shadow: 0px 0px 20px #000;
	/*--CSS3 Rounded Corners--*/
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
img.btn_close {
	float: right;
	margin: -55px -55px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
	position: absolute;
}
*html .popup_block {
	position: absolute;
}

Мы не знакомы, но мы не чужие, возьми мою руку.

На правах рекламы!
На учебе задали написать реферат а времени нет? Попробуй в интернете. Главное не забудь узнать у сокурсников темы их рефератов, что бы не получился конфуз в виде нескольких идентичных рефератов.

Запись опубликована в рубрике CMS с метками , , . Добавьте в закладки постоянную ссылку.

13 комментариев: Модальные окна с помощью jQuery и CSS. Своя ширина для каждого окна.

  1. Eviral1 говорит:

    Большое спасибо за статью. Пригодиться. :)

  2. Про говорит:

    В IE7 #fade поверх попап… как исправить?

  3. HardFix говорит:

    Чтобы в IE6 все отображалось должным образом нужно ОБЯЗАТЕЛЬНО добавить для тэгов body и html height:100%; иначе затемняющее поле не будет растягиваться на всю высоту.

  4. Ann говорит:

    Спасибо большое! Очень пригодилось!
    Только как сделать так, чтобы в окне отображалось содержимое html-файла? То есть каким образом оформить ссылку на страницу, чтобы она загружалась внутрь окна?

    • extezy говорит:

      Разве что через iframe.
      А для каких нужд, если не секрет?
      Быть может лучше сделать небольшое описание в самом окне и сопроводить его ссылками на нужные страницы?

      • Walera говорит:

        показывать в окне html файл бывает нужно, если он вызывает с разных страниц сайта, чтобы просто указать ссылку на это файл и не приводить весь код окна

  5. b52keks говорит:

    Спасибо! А как в тоже окно вернуть ответ присланный через AJAX, если объясните буду рад ;)

  6. Дмитрий говорит:

    Отсутствует затемнение на заднем фоне. CSS не изменял

  7. говорит:

    Поставил на DLE ,все работает но вот заметил что [спойлер] перестал работать ,может кто знает в чем причина.

    • TimuR говорит:

      Попробуй убрать первую строку скрипта описанную в статье: Подключаем jQuery:
      Оставь только Вызов элементов jQuery:

      =) мне помогло на DLE

  8. attare говорит:

    Сенкс мужик…очень пригодилось…та же самая хня была…конфликтовали плагины…этот работает на 100

  9. говорит:

    Гуглил простое решение модальных окон. Везде в основном целые плагины, а это больно жирно для моего случая. Ваше решение отлично работает. Осталось лишь модифицировать под себя графически. Большое спасибо! =)

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

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

*

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