Комментарии 71
Демо покажите, будьте добры.
Уже есть стандартный ui-виджет dialog, в котором в том числе есть и маска на бекграунд, так что ваш пример излишен.
полезная вещь, спасибо, не знал
Не соглашусь. Конкретная задача — простое аккуратное решение и ненужно грузить 190 кб дополнительного кода, что бы только открыть диалог.
Сам сделал так же, когда стояла задача с попапом. Долго выбирал, использовать ли UI.
Наши коды удивительно схожи между собой получились)))
Сам сделал так же, когда стояла задача с попапом. Долго выбирал, использовать ли UI.
Наши коды удивительно схожи между собой получились)))
Имхо, не стоит фейдить, тем более медленно, однотонные блоки большого размера — может это моя видеокарта не фонтан или монитор старенький, но у меня наблюдается мельтешение серых полос при появлении попапа.
Надо бы в плагин оформить, чтоб можно было так вызывать:
Хром
это если его растягивать или он такой сразу?
Это если растягиваете textarea. Лечится изменением в css для #popup с
width: 300px;
на
min-width: 300px;
Обновил.
width: 300px;
на
min-width: 300px;
Обновил.
замечательный браузер от самой лучшей компании. )
вы не учли ситуацию когда страница короткая(нет бокового скрола). размер «opaco» не будет меняться при изменении высоты окна браузера.
так что думаю стоит добавить в скрипт нечто типа
jQuery(window).resize(function(){
$('#opaco:visible').height($(document).height());
});
так что думаю стоит добавить в скрипт нечто типа
jQuery(window).resize(function(){
$('#opaco:visible').height($(document).height());
});
вы где-то смогли получить такую ошибку?
везде работает и так — без этого дополнения.
т.е. если изначально popup открываем в браузере не на полную высоту, а потом вытягиваем вниз — темный фон присутствует полностью во всю высоту.
на самом деле проблема, которая есть, это если разрешение монитора по высоте у пользователя в принципе меньше высоты popup блока — в этом случае он никогда не сможет добраться до кнопок. Но так как пример был больше про JQuery, чем CSS, внимания уделять не стал.
везде работает и так — без этого дополнения.
т.е. если изначально popup открываем в браузере не на полную высоту, а потом вытягиваем вниз — темный фон присутствует полностью во всю высоту.
на самом деле проблема, которая есть, это если разрешение монитора по высоте у пользователя в принципе меньше высоты popup блока — в этом случае он никогда не сможет добраться до кнопок. Но так как пример был больше про JQuery, чем CSS, внимания уделять не стал.
а нельзя было просто прописать в css для центрирования диалога:
left: 50%;
margin-left: -ширина диалога / 2;
position: absolute;
Сейчас у вас позиция открытого диалога никак не зависит от размеров окна браузера — некрасиво как-то. Параметр margin можно вычислять через js и прописывать при окрытии диалога.
left: 50%;
margin-left: -ширина диалога / 2;
position: absolute;
Сейчас у вас позиция открытого диалога никак не зависит от размеров окна браузера — некрасиво как-то. Параметр margin можно вычислять через js и прописывать при окрытии диалога.
Сейчас у вас позиция открытого диалога никак не зависит от размеров окна браузера — некрасиво как-то. Параметр margin можно вычислять через js и прописывать при окрытии диалога.Не правда Ваша. Сейчас позиция блока центрируется как раз методом alignCenter, который к jQuery добавил.
Ваш метод применим, но во-первых только для ширины блока, т.к. высота обычно динамическая и ее все равно считать на лету надо.
Но и есть ограничение Вашего метода. Например, если в CSS для popup прописать минимальную ширину min-width:300px, тогда каким образом в том же CSS добавить margin-left: -ширина диалога/2?
margin-left: -150px не пойдет, т.к. если внутри popup будет поле скажем шириной 500px весь блок станет шире и у вас он сместится вправо на экране.
У меня же будет всегда по центру как по высоте, так и по горизонтали.
Будет по вашему методу, но координаты высчитываются в момент открытия диалога, если потом размер окна браузера изменится, то координаты уже не будут пересчитаны и диалог будет не по центру, а то и вовсе может уйти к краю браузера.
Да, я понимаю, что эта ситуация не типичная, но представте когда у вас несколько диалогов расположенных в разных местах страницы и окно браузера меняет свой размер? Весь ваш интерфейс либо уйдёт за край страницы, либо его перекосит, если не установлен overflow.
Поэтому вам придётся либо пересчитывать координаты открытых диалогов при изменении размеров окна браузера, либо использовать вариации моего метода. А насчет min-width, что мешает учитывать этот параметр и физическую ширину при расчете положения окна диалога?
Да, я понимаю, что эта ситуация не типичная, но представте когда у вас несколько диалогов расположенных в разных местах страницы и окно браузера меняет свой размер? Весь ваш интерфейс либо уйдёт за край страницы, либо его перекосит, если не установлен overflow.
Поэтому вам придётся либо пересчитывать координаты открытых диалогов при изменении размеров окна браузера, либо использовать вариации моего метода. А насчет min-width, что мешает учитывать этот параметр и физическую ширину при расчете положения окна диалога?
Да, я понимаю, что эта ситуация не типичная, но представте когда у вас несколько диалогов расположенных в разных местах страницы и окно браузера меняет свой размер?ну я описывал сит-ю, когда одно окошко по центру. Если их несколько — там. конечно, все сложнее будет. Но что-то совсем не жизненная сит-я, когда несколько popup одновременно. Если не нравится, что уходит за край при растяжке браузера — можно дописать, конечно, пересчет отступов и навесить на $(window).resize().
А насчет min-width, что мешает учитывать этот параметр и физическую ширину при расчете положения окна диалога?насколько я понял, Вы предлагали в CSS засунуть отступ слева для блока вида margin-left: -ширина блока/2. Если на лету считать — то понятно, там проблем не будет. Но у меня именно на лету и считалось.
Усложняете вы всё. Вот поэтому я недолюбливаю дискуссии про jquery — на то, что можно решить двумя строчками на css и тремя на js вы навешиваете полнофункциональный фреймворк и еще добавляете несколько обработчиков для разных событий.
Вы можете сказать об универсальности, но ваш пример абсолютно не универсальный, а просто нагромождение функционала для элементарной задачи (которая, кстати и не решена полностью).
Вместо того, что-бы установить процентное смещение и фиксированную отрицательную поправку (которая считается один раз при выводе окна диалога) и предоставить смещать блок диалога встроенному движку браузера вы предлагаете навесить еще одно событие с постоянными пересчетами.
Теперь я понимаю жалобы в других ветках сайта на тормознутость браузеров и нехватки памяти.
Простите.
Вы можете сказать об универсальности, но ваш пример абсолютно не универсальный, а просто нагромождение функционала для элементарной задачи (которая, кстати и не решена полностью).
Вместо того, что-бы установить процентное смещение и фиксированную отрицательную поправку (которая считается один раз при выводе окна диалога) и предоставить смещать блок диалога встроенному движку браузера вы предлагаете навесить еще одно событие с постоянными пересчетами.
Теперь я понимаю жалобы в других ветках сайта на тормознутость браузеров и нехватки памяти.
Простите.
Вместо того, что-бы установить процентное смещение и фиксированную отрицательную поправку (которая считается один раз при выводе окна диалога) и предоставить смещать блок диалога встроенному движку браузера вы предлагаете навесить еще одно событие с постоянными пересчетами.да согласен полностью, я просто изначально недопонял Вас. Считал, что Вы это все прописать в CSS файлике именно хотите.
Про $(windows).resize() — это что в голову первое пришло, но тут, конечно, Ваше решение будет лучше.
Вот поэтому я недолюбливаю дискуссии про jquery — на то, что можно решить двумя строчками на css и тремя на js вы навешиваете полнофункциональный фреймворкдискуссии нужны именно для того, чтобы дали совет и др начинающий понял, как делать не стоит. Как уже писал я в jQuery новичок, как в принципе и в Javascript. А это болезнь всех начинающих — наворачивать лишнее, когда можно сделать проще.
Сейчас у вас позиция открытого диалога никак не зависит от размеров окна браузера — некрасиво как-то. Параметр margin можно вычислять через js и прописывать при окрытии диалога.Не правда Ваша. Сейчас позиция блока центрируется как раз методом alignCenter, который к jQuery добавил.
Ваш метод применим, но во-первых только для ширины блока, т.к. высота обычно динамическая и ее все равно считать на лету надо.
Но и есть ограничение Вашего метода. Например, если в CSS для popup прописать минимальную ширину min-width:300px, тогда каким образом в том же CSS добавить margin-left: -ширина диалога/2?
margin-left: -150px не пойдет, т.к. если внутри popup будет поле скажем шириной 500px весь блок станет шире и у вас он сместится вправо на экране.
У меня же будет всегда по центру как по высоте, так и по горизонтали.
FPS ужасное, это при том, что машина у меня не самая старая, и мой личный скрипт на эту тему, написанный, правда, с использованием MooTools, работает куда быстрее.
Сомневаюсь, что MooTools или что-то еще будет работать быстрее. Все сводится к Javascript, а jQuery и Mootools это только фреймворк.
Кстати, я перешел с MooTools на jQuery с тех пор, как MooTools зарубили обратную совместимость версий своего фреймворка ;)
Кстати, я перешел с MooTools на jQuery с тех пор, как MooTools зарубили обратную совместимость версий своего фреймворка ;)
+1. Вообще фейд в браузере допустим только на очень малюсеньких областях. А то даже на сильных машинах но с большими мониками и например под linux (ну прям хуже для браузера не придумаешь) и ещё и в firefox — все ТАК тормозит, аж противно.
Q6700 + Nec 24'' + Gentoo Linux + Firefox 3.1b
Q6700 + Nec 24'' + Gentoo Linux + Firefox 3.1b
Честно говоря, не понимаю, зачем создавать темы в которых описываются простейшие приемы.
Хочется оригинального.
Хочется оригинального.
leandrovieira.com/projects/jquery/lightbox/
Быстро и красиво.
Быстро и красиво.
А Вам никто не говорил, что onclick в HTML-коде — это прошлый век и просто некошерно?
А как правильно надо?
(function() {
window.onload = function () {
var elements_for_onclick = {
'_my_custom_popup' => function () { showPopup('bug'); },
'_my_custom_popup2' => function () { showPopup('bug'); },
};
}
)();
window.onload = function () {
var elements_for_onclick = {
'_my_custom_popup' => function () { showPopup('bug'); },
'_my_custom_popup2' => function () { showPopup('bug'); },
};
}
)();
как-то так
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++;
}
}
)();
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++;
}
}
)();
В IE 6
вообще полный бардак
вообще полный бардак
Ковырнул код thickbox и активно использую. Велосипед…
и нафига козе баян? тем более, если вновь созданный баян, хуже имеющихся аналогов.
что-то у меня когда окно с нижней ссылки открывается — всё остаётся вверху.
фф3
фф3
вот-вот… )
в опере тоже самое
это я поторопился.
там написали, что в IE6 не работает, а не работало из-за position:fixed, ну я ее и поменял на position:absolute. И совсем забыл про первый пример, где вторая ссылка внизу дана.
вот оно всегда и позиционировалось сверху.
теперь прописал свойства отдельно для IE6.
во всех браузерах кроме IE6 — должно быть в центре и двигаться с прокруткой, в IE6 открывается по центру, но при прокрутке остается на месте.
там написали, что в IE6 не работает, а не работало из-за position:fixed, ну я ее и поменял на position:absolute. И совсем забыл про первый пример, где вторая ссылка внизу дана.
вот оно всегда и позиционировалось сверху.
теперь прописал свойства отдельно для IE6.
во всех браузерах кроме IE6 — должно быть в центре и двигаться с прокруткой, в IE6 открывается по центру, но при прокрутке остается на месте.
В примере тыкаю на нижнюю ссылку, а попап открывается вверху, надо скроллить.
Нелогично.
FF 3.0.8
Нелогично.
FF 3.0.8
исправил
причина ошибки — см. комменатрий
причина ошибки — см. комменатрий
Еще было бы неплохо добавить чтобы при нажатии Esc, форма закрывалась. Порой очень удобно.
прочел «Завести ошибку», увидел, что при клику по фону окно не закрывается и закрыл пример. не грамотно.
использовать не буду.
использовать не буду.
1) При клике на темный фон надо бы закрывать попап.
2) при высоте активной области меньшей, чем высота попапа, последний должен быть виден полностью, а не уползать за границы окна.
А так вроде ниче нового и необычного… Сделано нормально, только уникальности нет.
2) при высоте активной области меньшей, чем высота попапа, последний должен быть виден полностью, а не уползать за границы окна.
А так вроде ниче нового и необычного… Сделано нормально, только уникальности нет.
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>
в javascript'e не силен, статья очень помогла
спасибо!
спасибо!
У меня под IE8 фон затухает нифига не плавно, а моментально. Под FF всё OK.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Popup с затухающим фоном с помощью jQuery