Как отобразить UI TimePickr спереди, используя Z-индекс? - PullRequest
Новая
       12

Как отобразить UI TimePickr спереди, используя Z-индекс?

3 голосов
/ 28 июня 2010

Внутри colorbox, я использую timepickr.Проблема в том, что содержимое timepickr вырубается на краю colorbox из-за переполнения : скрыто .

Здесь я вставил некоторый код,

// код JavaScript, написанный мной 

jQuery(".transportPopup").colorbox({
initialWidth: 150,
initialHeight: 150,
width: 920,
scrolling: false,
transition: "elastic",
opacity: 0.3
}, function() {
   // timepickr on textbox to choose time
   jQuery("#start_time, #end_time").timepickr({updateLive: false, trigger: "focus" });
});

Приведенный выше скрипт создает всплывающее окно colorbox с html, 

<div id="colorbox" style="padding-bottom: 42px; padding-right: 42px; display: block; width: 878px; height: 277px; top: 285.5px; left: 44px;">  
<div id="cboxWrapper" style="height: 319px; width: 920px;">  
......  
<div id="cboxContent" style="float: left; width: 878px; height: 277px;">  
<div id="cboxLoadedContent" style="display: block; width: 878px; overflow: hidden; height: 277px;"><div>  
<div style="position: relative; z-index: 1;">  
        <label class="lblText floatLeft" for="departure_time"><span class="star">*&nbsp;</span>Departure time:&nbsp;</label>                    
        <input type="text" class="inputText w50" readonly="readonly" value="" id="departure_time" name="departure_time">  
        <!-- CODE GENERATED BY TIMPICKR -->  
        <div class="ui-helper-reset ui-timepickr ui-widget" style="left: 309.3px;">  
            ..........  
        </div>          
</div>  
......  
</div>

// css colorbox, определенное его автором 

#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}

// css timepickr, определенный его автором 

.ui-timepickr {
position:absolute;
width:480px;
top:22px;
display:none;
z-index:99999;

}

Если я изменю css из colorbox и сделаю свойство overflow «видимым», тогда полоса прокрутки появится на странице, а ширина станет удвоеннойстраницы.

Ответы [ 2 ]

0 голосов
/ 12 июля 2010

Я нашел решение. Просто нужно установить ширину минутного деления timepickr.

0 голосов
/ 28 июня 2010

убедитесь, что все элементы z-index имеют свойство css position:, иначе z-index не будет работать.

...