Volder 16 апр 2009 в 21:11

Popup с затухающим фоном с помощью jQuery

8 мин

43K

jQuery*

+43

Комментарии 71

Exabiche 16 апр 2009 в 21:39

Демо покажите, будьте добры.

Volder 16 апр 2009 в 21:44

после хабраката сразу ссылка по тексту есть

xfenix 16 апр 2009 в 21:51

Уже есть стандартный ui-виджет dialog, в котором в том числе есть и маска на бекграунд, так что ваш пример излишен.

Volder 16 апр 2009 в 22:02

полезная вещь, спасибо, не знал

cramen 17 апр 2009 в 09:57

plugins.jquery.com/project/SmartModal
да и куча подобного уже есть…
зачем что-то изобретать )

leoneed 16 апр 2009 в 22:04

Не соглашусь. Конкретная задача — простое аккуратное решение и ненужно грузить 190 кб дополнительного кода, что бы только открыть диалог.
Сам сделал так же, когда стояла задача с попапом. Долго выбирал, использовать ли UI.
Наши коды удивительно схожи между собой получились)))

galaxy 16 апр 2009 в 23:00

Имхо, не стоит фейдить, тем более медленно, однотонные блоки большого размера — может это моя видеокарта не фонтан или монитор старенький, но у меня наблюдается мельтешение серых полос при появлении попапа.

Volder 16 апр 2009 в 23:16

У меня тоже немного есть такого — хотя ноут старенький, конечно.
Но думаю тут не в железе проблема, т.к. в разных браузерах — по-разному ведет себя.

Самое гладкое в FF, заметнее всего в Chrome имхо.

Auru 16 апр 2009 в 23:34

Надо бы в плагин оформить, чтоб можно было так вызывать:

Auru 16 апр 2009 в 23:37

Надо бы в плагин оформить, чтоб можно было так вызывать:

$('popup_bug').popup({

align: 'center',

borderColor: '#F00'

});

И опции использовать можно и методов потом приделать, а то у вас все глобальными методами, а центрирование (alignCenter) сделано отдельным плагином.

Auru 16 апр 2009 в 23:39

$('#popup_bug')

Volder 17 апр 2009 в 09:54

переделал в метод togglePopup(). Добавил по тексту UPD.
Только параметров не стал там задавать.

G0rDi 17 апр 2009 в 00:16

Хром

ya_goshka 17 апр 2009 в 00:53

это если его растягивать или он такой сразу?

Volder 17 апр 2009 в 08:09

Это если растягиваете textarea. Лечится изменением в css для #popup с
width: 300px;
на
min-width: 300px;

Обновил.

ya_goshka 17 апр 2009 в 10:00

на max-width

Volder 17 апр 2009 в 10:23

да нет, max-width даст тот же эффект, что и width — то есть блок закрепим по ширине и textarea будет вылезать.
А если min-width установить — то ширина блока будет плавно ездить и при расширении textarea.

ya_goshka 20 апр 2009 в 17:20

сорри)
я предпочитаю текстарии ставить max-width, тянущая ареа редко нужна

ferrari 17 апр 2009 в 11:43

поставьте для textarea width и height !important и webkit (сафари, хром) не дадут возможность растягивать елемент

mocksoul 17 апр 2009 в 13:05

а вот это не наадо =)

VasilioRuzanni 17 апр 2009 в 13:06

Во, во, это офигенная фишка. Очень удобная.

mocksoul 17 апр 2009 в 13:04

а IE?

Angelina_Joulie 17 апр 2009 в 13:20

замечательный браузер от самой лучшей компании. )

magicstream 17 апр 2009 в 00:22

вы не учли ситуацию когда страница короткая(нет бокового скрола). размер «opaco» не будет меняться при изменении высоты окна браузера.
так что думаю стоит добавить в скрипт нечто типа
jQuery(window).resize(function(){
$('#opaco:visible').height($(document).height());
});

Volder 17 апр 2009 в 08:45

вы где-то смогли получить такую ошибку?
везде работает и так — без этого дополнения.
т.е. если изначально popup открываем в браузере не на полную высоту, а потом вытягиваем вниз — темный фон присутствует полностью во всю высоту.

на самом деле проблема, которая есть, это если разрешение монитора по высоте у пользователя в принципе меньше высоты popup блока — в этом случае он никогда не сможет добраться до кнопок. Но так как пример был больше про JQuery, чем CSS, внимания уделять не стал.

yroman 17 апр 2009 в 11:10

Firefox 3.0.8 — ресайзим браузер на половину высоты экрана, открываем попап, растягиваем окно браузера на максимум по высоте — покрывающий слой по высоте равен изначальной, снизу белая полоса, некрасиво.

Volder 17 апр 2009 в 12:49

Firefox 3.0.8 — делаю абсолютно то же самое — все работает без проблем.

dshster 17 апр 2009 в 00:28

а нельзя было просто прописать в css для центрирования диалога:
left: 50%;
margin-left: -ширина диалога / 2;
position: absolute;

Сейчас у вас позиция открытого диалога никак не зависит от размеров окна браузера — некрасиво как-то. Параметр margin можно вычислять через js и прописывать при окрытии диалога.

Volder 17 апр 2009 в 09:05

Сейчас у вас позиция открытого диалога никак не зависит от размеров окна браузера — некрасиво как-то. Параметр margin можно вычислять через js и прописывать при окрытии диалога.

Не правда Ваша. Сейчас позиция блока центрируется как раз методом alignCenter, который к jQuery добавил.
Ваш метод применим, но во-первых только для ширины блока, т.к. высота обычно динамическая и ее все равно считать на лету надо.
Но и есть ограничение Вашего метода. Например, если в CSS для popup прописать минимальную ширину min-width:300px, тогда каким образом в том же CSS добавить margin-left: -ширина диалога/2?
margin-left: -150px не пойдет, т.к. если внутри popup будет поле скажем шириной 500px весь блок станет шире и у вас он сместится вправо на экране.
У меня же будет всегда по центру как по высоте, так и по горизонтали.

dshster 17 апр 2009 в 09:58

Будет по вашему методу, но координаты высчитываются в момент открытия диалога, если потом размер окна браузера изменится, то координаты уже не будут пересчитаны и диалог будет не по центру, а то и вовсе может уйти к краю браузера.
Да, я понимаю, что эта ситуация не типичная, но представте когда у вас несколько диалогов расположенных в разных местах страницы и окно браузера меняет свой размер? Весь ваш интерфейс либо уйдёт за край страницы, либо его перекосит, если не установлен overflow.

Поэтому вам придётся либо пересчитывать координаты открытых диалогов при изменении размеров окна браузера, либо использовать вариации моего метода. А насчет min-width, что мешает учитывать этот параметр и физическую ширину при расчете положения окна диалога?

Volder 17 апр 2009 в 10:08

Да, я понимаю, что эта ситуация не типичная, но представте когда у вас несколько диалогов расположенных в разных местах страницы и окно браузера меняет свой размер?

ну я описывал сит-ю, когда одно окошко по центру. Если их несколько — там. конечно, все сложнее будет. Но что-то совсем не жизненная сит-я, когда несколько popup одновременно. Если не нравится, что уходит за край при растяжке браузера — можно дописать, конечно, пересчет отступов и навесить на $(window).resize().

А насчет min-width, что мешает учитывать этот параметр и физическую ширину при расчете положения окна диалога?

насколько я понял, Вы предлагали в CSS засунуть отступ слева для блока вида margin-left: -ширина блока/2. Если на лету считать — то понятно, там проблем не будет. Но у меня именно на лету и считалось.

dshster 17 апр 2009 в 10:22

Усложняете вы всё. Вот поэтому я недолюбливаю дискуссии про jquery — на то, что можно решить двумя строчками на css и тремя на js вы навешиваете полнофункциональный фреймворк и еще добавляете несколько обработчиков для разных событий.

Вы можете сказать об универсальности, но ваш пример абсолютно не универсальный, а просто нагромождение функционала для элементарной задачи (которая, кстати и не решена полностью).

Вместо того, что-бы установить процентное смещение и фиксированную отрицательную поправку (которая считается один раз при выводе окна диалога) и предоставить смещать блок диалога встроенному движку браузера вы предлагаете навесить еще одно событие с постоянными пересчетами.

Теперь я понимаю жалобы в других ветках сайта на тормознутость браузеров и нехватки памяти.
Простите.

Volder 17 апр 2009 в 10:32

Вместо того, что-бы установить процентное смещение и фиксированную отрицательную поправку (которая считается один раз при выводе окна диалога) и предоставить смещать блок диалога встроенному движку браузера вы предлагаете навесить еще одно событие с постоянными пересчетами.

да согласен полностью, я просто изначально недопонял Вас. Считал, что Вы это все прописать в CSS файлике именно хотите.
Про $(windows).resize() — это что в голову первое пришло, но тут, конечно, Ваше решение будет лучше.

Вот поэтому я недолюбливаю дискуссии про jquery — на то, что можно решить двумя строчками на css и тремя на js вы навешиваете полнофункциональный фреймворк

дискуссии нужны именно для того, чтобы дали совет и др начинающий понял, как делать не стоит. Как уже писал я в jQuery новичок, как в принципе и в Javascript. А это болезнь всех начинающих — наворачивать лишнее, когда можно сделать проще.

Volder 17 апр 2009 в 09:04

Сейчас у вас позиция открытого диалога никак не зависит от размеров окна браузера — некрасиво как-то. Параметр margin можно вычислять через js и прописывать при окрытии диалога.

DarkPhoenix 17 апр 2009 в 10:05

FPS ужасное, это при том, что машина у меня не самая старая, и мой личный скрипт на эту тему, написанный, правда, с использованием MooTools, работает куда быстрее.

Gangsta 17 апр 2009 в 10:40

Сомневаюсь, что MooTools или что-то еще будет работать быстрее. Все сводится к Javascript, а jQuery и Mootools это только фреймворк.

Кстати, я перешел с MooTools на jQuery с тех пор, как MooTools зарубили обратную совместимость версий своего фреймворка ;)

DarkPhoenix 17 апр 2009 в 10:41

А я пользуюсь старой версией Мутулз и это меня ничуть не смущает :)

Gangsta 17 апр 2009 в 10:45

Меня вот смутило :) Особенно то, что старой версии на сайте этого фреймворка нет. Это вообще из области антипаттернов, выпустить новую версию, которая будет несовместима со старой, да еще и старую с сайта убрать.

DarkPhoenix 17 апр 2009 в 10:47

А вообще да, Мутулз уже не тот. Старый сайт был такой клевый, не то, что новый… Да и архитектура новая совсем какая-то странная.

mocksoul 17 апр 2009 в 13:03

+1. Вообще фейд в браузере допустим только на очень малюсеньких областях. А то даже на сильных машинах но с большими мониками и например под linux (ну прям хуже для браузера не придумаешь) и ещё и в firefox — все ТАК тормозит, аж противно.

Q6700 + Nec 24'' + Gentoo Linux + Firefox 3.1b

romanoza 17 апр 2009 в 10:39

Честно говоря, не понимаю, зачем создавать темы в которых описываются простейшие приемы.
Хочется оригинального.

ISVir 17 апр 2009 в 11:12

Автор перемести это в новорожденный блог «Это очевидно»? ;)

romanoza 17 апр 2009 в 12:15

да хз куда переместить
жажда нового у меня :)

crtman 17 апр 2009 в 10:50

leandrovieira.com/projects/jquery/lightbox/
Быстро и красиво.

GreatWizard 17 апр 2009 в 11:17

Действительно здорово.

sunnybear 17 апр 2009 в 11:15

А Вам никто не говорил, что onclick в HTML-коде — это прошлый век и просто некошерно?

RazoR_Empire 17 апр 2009 в 16:20

А как правильно надо?

sunnybear 17 апр 2009 в 16:22

sunnybear 17 апр 2009 в 16:26

как-то так

function() {
window.onload = function () {

var elements_for_onclick = [
['_my_custom_popup', function () { showPopup('bug'); }],
['_my_custom_popup2', function () { showPopup('bug'); }],
['_my_custom_popup3', function () { showPopup('bug'); }]
], item, i=0;
while (elements_for_onclick[i] && (item = document.getElementById(elements_for_onclick[i][0]))) {
addOnClick(item, elements_for_onclick[i][1]);
i++;
}

}

)();

ibnteo 18 апр 2009 в 02:00

Да вы что, здесь же есть jQuery:

$(function() { // или $(document).ready(); кому как нравится
    $("a.popup").click(function() {
        // ...
        return false;
    });
});

sunnybear 18 апр 2009 в 10:20

черт, извините, привык все ручками писать :)

egoserg 17 апр 2009 в 12:07

В IE 6
вообще полный бардак

Volder 17 апр 2009 в 14:00

будь он не ладен, этот IE6
поправил у #popup
position: fixed;
на
position:absolute;

Zimyand 17 апр 2009 в 12:52

Ковырнул код thickbox и активно использую. Велосипед…

lautsevich 17 апр 2009 в 13:09

и нафига козе баян? тем более, если вновь созданный баян, хуже имеющихся аналогов.

bullgare 17 апр 2009 в 14:36

что-то у меня когда окно с нижней ссылки открывается — всё остаётся вверху.
фф3

barkalov 17 апр 2009 в 14:40

вот-вот… )

mank_dev 17 апр 2009 в 15:14

в опере тоже самое

Volder 17 апр 2009 в 15:45

это я поторопился.
там написали, что в IE6 не работает, а не работало из-за position:fixed, ну я ее и поменял на position:absolute. И совсем забыл про первый пример, где вторая ссылка внизу дана.
вот оно всегда и позиционировалось сверху.

теперь прописал свойства отдельно для IE6.

во всех браузерах кроме IE6 — должно быть в центре и двигаться с прокруткой, в IE6 открывается по центру, но при прокрутке остается на месте.

bullgare 17 апр 2009 в 16:41

да я это уже понял.
в жквери достаточно просто посчитать высоту окна/положение скролла.
я просто не стал расшифровывать, сорь;)

barkalov 17 апр 2009 в 14:38

В примере тыкаю на нижнюю ссылку, а попап открывается вверху, надо скроллить.
Нелогично.

FF 3.0.8

Volder 17 апр 2009 в 15:49

исправил
причина ошибки — см. комменатрий

croatian 17 апр 2009 в 14:40

Еще было бы неплохо добавить чтобы при нажатии Esc, форма закрывалась. Порой очень удобно.

nicothin 17 апр 2009 в 15:41

прочел «Завести ошибку», увидел, что при клику по фону окно не закрывается и закрыл пример. не грамотно.
использовать не буду.

vietnamese 17 апр 2009 в 19:59

1) При клике на темный фон надо бы закрывать попап.
2) при высоте активной области меньшей, чем высота попапа, последний должен быть виден полностью, а не уползать за границы окна.

А так вроде ниче нового и необычного… Сделано нормально, только уникальности нет.

Volder 17 апр 2009 в 22:23

добавил про клик на темном фоне — UPD 4 по тексту.

ibnteo 18 апр 2009 в 01:56

Javascript должен быть ненавязчивым, делается в jQuery это очень просто:

<p class="bug"><a href="bug.html">Сообщите об ошибке на сайте!</a></p>
<script type="text/javascript">
$(function() {
    $("p.bug a").click(function() {
        // здесь передается ссылка на форму сообщения ошибки
        // форму лучше подгружать через load() или аналогичные Ajax функции
        showPopup($(this).attr("href"));
        return false;
    });
});
</script>

uses 25 июн 2009 в 02:18

в javascript'e не силен, статья очень помогла
спасибо!

hTLK 21 сен 2009 в 23:10

У меня под IE8 фон затухает нифига не плавно, а моментально. Под FF всё OK.

Volder 21 сен 2009 в 23:21

В IE плавное затухание не работает. Я по тексту писал об этом:

если IE — то там плавного затухания сделать не получится (а мы даже и не пытаемся), а вот во всех остальных случаях, мы постепенно затемняем блок, используя метод fadeTo('slow', 0.7).

А вот в чем там причине — так навскидку не вспомню.

hTLK 22 сен 2009 в 11:07

Странно, у меня отлично работают такие же затухания во всех браузерах, в т.ч. чуть ли не IE6. Только я использую другой метод. Сейчас я не на работе, но если память не изменяет, то я юзал css('opacity', 0.7). Попробуйте.

Зарегистрируйтесь на Хабре, чтобы оставить комментарий