Некорректно отображается стилизованный select в PopUp окне
Добрый день.
Селект вне окна работает так как нужно, но как только вставляю его в PopUp, ведет себя непонятным образом. Причем даже список при клике не выпадает. Подскажите пожалуйста, в каком направлении копать? Код:
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<title> </title>
<script type="text/javascript" src="http://yandex.st/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="cusel-min-2.3.1.js"></script>
<script>
//selects
var params = {
changedEl: "#select_time", visRows: 6, scrollArrows: true
}
cuSel(params);
var params = {
changedEl: "#select_time2", visRows: 6, scrollArrows: true
}
cuSel(params);
$(document).ready(function(){
$('#toggleadress3').dopPopup($('#adress3'));
$("#some_adress2").click(function () {
$('.b-login5__adress').fadeOut(300);
});
});
//popap
(function($, window) {
$.fn.dopPopup = function($adress3) {
var $self = this,
$window = $(window);
return this.click(
function() {
$adress3.fadeIn(300).bind('click.bLogin5', function(event){
event.stopPropagation();
});
return false;
},
function(){
$adress3.fadeOut(300).unbind('.bLogin5');
$window.unbind('.bLogin5');
return false;
}
);
};
})(jQuery, window);
</script>
<style>
.some_adress_wrap{height: 20px; width: 189px; position: relative; margin: 7px 0 0 110px;}
#some_adress {border-bottom: 1px dashed black; cursor: pointer; position: relative; float: right; margin: -4px 5px 0 0;color: #575656}
#some_adress2 {border-bottom: 1px dashed black; cursor: pointer; position: relative; float: right; margin: -26px 0 0 0;color: #575656}
#some_adress:hover, #some_adress_return:hover{border: 0;}
#some_adress_return {border-bottom: 1px dashed black; cursor: pointer; position: relative; z-index:2; float: right; display: none;margin: -4px 5px 0 0;color: #575656;}
.b-login5__adress { background: #f5f5f5; display: none; left: -5px; top: 22px; position: absolute; z-index:4; width: 100%;}
/*----стилизованный селект------*/
.cusel,.cuselFrameRight,.jScrollPaneDrag,.jScrollArrowUp,.jScrollArrowDown {background: url(selects-sprite.png) no-repeat;border:0; outline:0;}
.cusel {height: 31px;background-position: left top; display: inline-block; position: relative; cursor: pointer; font: 12px "segoeui"; color:#454444;}
.cuselFrameRight {position: absolute;top: 0; right: 0;height: 100%;width: 32px;background-position: right top;}
.cuselText { height: 14px;padding: 8px 0 0 8px; cursor: pointer; overflow: hidden;position: relative;
font: 12px "segoeui"; color:#868685; position: absolute;top: 0; left: 0;}
* html .cuselText {height: 22px;}
.cusel span {display: block;cursor: pointer;white-space: nowrap; padding: 4px 15px 4px 8px;zoom: 1;}
.cusel span:hover,.cusel .cuselOptHover { background: #edecec;}
.cusel .cuselActive {background: #edecec;cursor: default;}
.cusel-scroll-wrap { display: block; visibility: hidden; position: absolute; left: 0;top: 100%; background: #fff;min-width: 100%;width: auto;}
.cusel .jScrollPaneContainer {position: relative;overflow: hidden;border-left: 1px solid #d5d5d5;border-right: 1px solid #d5d5d5; border-bottom: 1px solid #d5d5d5;background: #f5f5f5;}
.cusel .jScrollPaneTrack {height: 100%;width: 3px !important;position: absolute; top: 0; right: 6px; background: none;}
.cusel .jScrollPaneDrag { position: absolute; background: #ccc;cursor: pointer;width: 9px !important; height: 21px !important;right: -3px;}
.cusel .jScrollPaneDragTop { position: absolute; top: 0; left: 0;overflow: hidden;}
.cusel .jScrollPaneDragBottom {position: absolute;bottom: 0; left: 0;overflow: hidden;}
.cusel .jScrollArrowUp { position: absolute; top: 0; right: 2px; width: 20px;height: 10px;cursor: pointer;background-position: -6px -31px;overflow: hidden;}
.cusel .jScrollArrowDown {width: 25px;height: 10px;position: absolute;top: auto; bottom: 0;right: 3px;cursor: pointer;background-position: -21px -32px;overflow: hidden;}
#select_time,#select_time2{width: 80px;}
</style>
<body>
<form action="#">
<div class="lineForm">
<select class="sel80" id="select_time2" name="select_time2" tabindex="2">
<option value="00:00">00:00</option>
<option value="19:00" selected="selected">19:00</option>
<option value="23:00">23:00</option>
<option value="23:05">23:05</option>
<option value="23:10">23:10</option>
<option value="23:15">23:15</option>
<option value="23:20">23:20</option>
<option value="23:25">23:25</option>
<option value="23:30">23:30</option>
<option value="23:35">23:35</option>
<option value="23:40">23:40</option>
<option value="23:45">23:45</option>
<option value="23:50">23:50</option>
<option value="23:55">23:55</option>
</select>
</div>
</form>
<div class="some_adress_wrap">
<div id="toggleadress3">
<a id="some_adress">Добавить адрес</a>
</div>
<div class="b-login5__adress" id="adress3">
<a id="some_adress2">Добавить адрес</a>
<form action="#">
<div class="lineForm">
<select class="sel80" id="select_time" name="select_time" tabindex="2">
<option value="00:00">00:00</option>
<option value="19:00" selected="selected">19:00</option>
<option value="23:00">23:00</option>
<option value="23:05">23:05</option>
<option value="23:10">23:10</option>
<option value="23:15">23:15</option>
<option value="23:20">23:20</option>
<option value="23:25">23:25</option>
<option value="23:30">23:30</option>
<option value="23:35">23:35</option>
<option value="23:40">23:40</option>
<option value="23:45">23:45</option>
<option value="23:50">23:50</option>
<option value="23:55">23:55</option>
</select>
</div>
</form>
</div>
</div>
</body>
</html>
Заранее благодарю за ответы. |
| Часовой пояс GMT +3, время: 20:13. |