|
Изменение z-index´a uWnd при работе с несколькими окошками
|
|
|
2011-08-13Дата: Суббота, 13.08.2011, 00:02 | Сообщение # 1 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
MaxL, Quote (MaxL) Скрипт сам создает id блоку вида _uwndTop1 или _uwndTop2 - как ему захочется.
В 99% случаях оба окна получают одинаковые id = _uwndTop1.
Кто вам сказал такую глупость ...
ID окну задаётся жестко и четко, и не меняется пока окно существует, и они не могут быть “одинаковые”.
Quote (MaxL) Второе окошко вызывается из первого окошка - оно из за меньшего z-index прячется под первое окошко - нужно то наоборот.
... Ага ... так и есть ... (сарказм)
☑ Пример (_uWnd.html)
...
Quote (MaxL) Второй выход из ситуации, это воспользоваться опцией oncontent, вызвать функцию, которая изменит z-index блока.
- Это не “второй” .., а, скорее, последний ... типа “мы не ищем лёгких путей ...” ...
Quote (MaxL) Как изменить z-index всплывающего U окна?
- просто стилями:
Code #_uwndWnd3{z-index:99999999!important}
... или onload - из самого окна по ID. ...
Code (function(){
var o=$('#miWindTest4').parents('div.xw-plain').parent()[0];
o.style.zIndex='999999';
alert('zIndex='+o.style.zIndex);
})();
... или задать класс и манипулировать стилями ....
Code $('#miWindTest3').parents('div.xw-plain').parent()[0].className='myWind3'; Code html div.myWind3{z-index:99999993!important}
- всё зависит от поставленной задачи ... вариантов много ...
...
...
...
P.S. Ссылка на пример в личке ...
В примере «http://likbezz.ru/_example/uwind/2010/part1/_uWnd_zindex.html» - вы не сможете переместить второе окно на задний план - оно будет всегда на переднем (организовано стилями) ...
А на странице «http://likbezz.ru/_example/uwind/2010/part1/_myWind_zindex.html» - окна будут именно в той последовательности, в которой пронумерованы ... (1,2,3,4) не зависимо от того в каком порядке будут открыты ...
Code html div.myWind1{z-index:99999991!important}
html div.myWind2{z-index:99999992!important}
html div.myWind3{z-index:99999993!important}
html div.myWind4{z-index:99999994!important}
...
P.P.S. А в принципе, можно организовать любую последовательность, любого кол-ва окон (в разумных пределах) ...
...
| | |
|
|
2011-08-13Дата: Суббота, 13.08.2011, 00:04 | Сообщение # 2 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Q: Quote (MaxL) fflesh, огромное спасибо что откликнулся.
Просмотрел все у тебя в примере и убедился, что каждому блоку выдан свой id.
Но у меня все по другому. Второму блоку выдается тот-же id, что и первому.
Вот код вызова первого блока.
Code <a href="javascript://" onclick="new _uWnd('ajax1','','657','520', {autosize:false,modal:true,close:true,header:true, nomove:true,fixed:false,resize:false,alert:false,align:'left' }, {xml:false,url:'_URL_'})">$TITLE$</a>
Quote (MaxL)
Он подгружает в себя html страницу товара в магазине.
Там же по клику по картинке на товар стандартным кодом от uCoz вызывается второе окошко.
Вот тот код, который обрабатывает работу картинок и по клику основной картинки вызывает еще одно всплывающее окно с набором картинок.
Он стандартный, поставляется в всех шаблонах к магазину.
Code $IMGS_ARRAY_JS$ <script type="text/javascript"> function _bldCont(indx){ var bck=indx-1; var nxt=indx+1; if (bck<0){bck = allEntImgs$ID$.length-1;} if (nxt>=allEntImgs$ID$.length){nxt=0;} var imgs=''; if (allEntImgs$ID$.length>1){ for (var i=0;i<allEntImgs$ID$.length;i++){ var img=i+1; if(allEntImgs$ID$[i][0].length<1){continue;} if (i==indx){imgs += '<b class="pgSwchA">'+img+'</b> ';} else { imgs += '<a class="pgSwch" href="javascript://" rel="nofollow" onclick="_bldCont('+i+');return false;">'+img+'</a> '; } } imgs = '<div align="center" style="padding:8px 0 5px 0; white-space:nowrap;overflow:auto; overflow-x:auto;overflow-y:hidden;"><a class="pgSwch" href="javascript://" rel="nofollow" onclick="_bldCont('+bck+');return false;">« Back</a> '+imgs+' <a class="pgSwch" href="javascript://" rel="nofollow" onclick="_bldCont('+nxt+');return false;">Next »</a> </div> ';} var hght = parseInt(allEntImgs$ID$[indx][2]); if ($.browser.msie) { hght += 28; }; _picsCont = '<div id="_prCont" style="position:relative;"><img alt="" border="0" src="' + allEntImgs$ID$[indx][0] + '"/>'+imgs+'</div>'; new _uWnd('wnd_prv', "Изображения товара", 10, 10, { waitimages:300000, autosizewidth:1, hideonresize:1, autosize:1, fadetype:1, closeonesc:1, align:'center', min:0, max:0, resize:1, setid:'fuck' }, _picsCont); } </script>
Quote (MaxL) Что же не так?
| | |
|
|
2011-08-13Дата: Суббота, 13.08.2011, 00:10 | Сообщение # 3 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
MaxL, Quote (MaxL) Но у меня все по другому. Второму блоку выдается тот-же id, что и первому.
Вы, видимо, не внимательно читаете.
... Либо не можете правильно распорядится полученной информацией ...
Ещё раз:
Первое: ID - это уникальный элемент на странице, тем более генерированный системным скриптом (но даже не в этом дело).
Второе: Если есть блок, значит им можно управлять. Так или иначе.
А как управлять - написано выше:
Quote (fflesh) - просто стилями: Code #_uwndWnd3{z-index:99999999!important} ... или onload - из самого окна по ID. ... Code (function(){
var o=$('#miWindTest4').parents('div.xw-plain').parent()[0];
o.style.zIndex='999999';
alert('zIndex='+o.style.zIndex);
})(); ... или задать класс и манипулировать стилями ....
Quote (MaxL) Он подгружает в себя html страницу товара в магазине.
Там же по клику по картинке на товар стандартным кодом от uCoz вызывается второе окошко.
Так как окно второе - первым - подгрузили - значит второе - следовательно его блок будет с ID == #_uwndTop2;
... идей нет? ...
Допустим, ссылка на открытия окна одна, и в окне картинка тоже одна - тогда просто стилями:
Code #_uwndTop2,#_uwndWnd2{z-index:9999999!important}
☑ Пример (_myWind_Array.html)
...
При других вариантах - лучше перестраховаться и назначить нужному окну - а “нужное” - это то, которое создаётся скриптом, (причём не лучшим ... о чём и писал - IMGS_ARRAY_JS и функция просмотра фоток материала. Оптимизируем - советую ознакомиться) - и назначить ему свой, определённый класс и через него уже осуществлять управление свойством z-index ....
Или, как вариант, назначить первому окну, изначально меньший - следовательно новое из этого окна будет выше по видимости....
Например:
Code html div.myWinGrid{z-index:1!important} /* полупрозрачный модальный слой */
html div.myWindImg2{z-index:2!important} /* - наш блок */
Code (function(){
var o=$('div.myWinCont').parents('div.xw-plain').parent()[0];o.className='myWindImg2';alert('className='+o.className);
})();
☑ Пример (_myWind_Array.html) - ссылка «$TITLE$ v2» ...
...
Вариант другой - изменить немного скрипт открытия картинки, и назначать уже не родительскому окну, а окну с картинкой более высокий z-index. Опять же, через стили:
Code html div.myWindImg3{z-index:9999999!important}
Code function setWindClass(){var o=$('#_prCont').parents('div.xw-plain').parent()[0];o.className='myWindImg3';alert('className='+o.className);}
Code oncontent:function(){setWindClass();}
☑ Пример (_myWind_Array.html) - ссылка «$TITLE$ v3» ...
...
...
Если ещё немного посидеть, положив на работу, наверняка можно придумать ещё пару способов ... ヅ
...
P.S. Алерты были оставлены специально, дабы видеть когда и что происходит.
Проверено в мозилле, хроме и опере ... ИЕ под рукой нет ... пока.
P.P.S. Лично мне больше нравится последний вариант, так как он наиболее надёжный, и ... и красиво исполнен )
- Что не понятно - смотрим исходники - всё прозрачно.
...
| | |
|
