我在IE中遇到问题。我有一个按钮,在那个按钮上我有div,哪个文本显示一些文字。文字来自和javascript的变化。 .ui-dp也在js中生成。即使文本在上面,我也需要点击该按钮。我使用了z-index,除了IE之外,它解决了所有问题。我尝试了很多我从这里找到的变种和google,但没有。有人可以帮忙吗?
Html看起来像这样:
<div class="calendar">
<button class="ui-dp"></button>
<div class="js-timeperiod timeperiod"></div>
</div>
Css看起来像这样:
.calendar {
display: inline-block;
float: center;
height: 28px;
width: 200px;
}
.ui-dp {
position: relative;
z-index: 2;
height: 28px;
background-color: transparent;
padding: 0px;
border: 0;
outline: 0;
cursor: pointer;
width: 200px;
text-align: left;
top: 0;
left: 0;
}
.timeperiod {
position: relative;
z-index: 1;
top: -30px;
left: 32px;
padding: 2px;
text-align: center;
height: 28px;
width: 150px;
float: center;
}
我必须指定它似乎工作,因为我点击timeperiod元素,没有文本。但是当介于两者之间时,它就不起作用了。
我用js代码制作了一个jsfiddle。 选择日期然后将出现文本 example here
答案 0 :(得分:0)
这可能是一个解决方法:将两个职位改为&#34;态度&#34;并将z-index更改为2&amp; 3
祝你好运!答案 1 :(得分:0)
我认为您可能需要重新考虑日期选择器。作为一般规则,始终让浏览器为您完成工作并使用标准堆叠(如果可能)。这样你可以减少你的css,这对性能和SEO更好。我不确定您的最终结果是什么,但这是一个遵循一般规则的替代版本。
$('.datepicker').datepicker({
showWeek: true,
firstDay: 1,
showOtherMonths: true,
selectOtherMonths: true,
dateFormat: "dd.mm.yy",
showOn: "both",
buttonText: "Launch the Date Picker", // For accessibility purposes
buttonImage: 'http://www.aparchive.com/i/icon_datePicker_0001_calendar-default.png', // Change the url according to your need.
buttonImageOnly: false,
onSelect: function (dateStr, inst) {
$('.datepicker').show(); // Show the input before inserting date
$('.datepicker').html(dateStr);
}
});
.calendar {
display: inline-block; /* You can also use block but it will be harder to align the element inside without specifying an height to chidlren elements */
background: #e22e25; /* In case your linear gradient is not applied on older browser */
background: -moz-linear-gradient(top, #E22E25, #AC170F);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#E22E25), to(#AC170F));
background: -webkit-linear-gradient(top, #E22E25, #AC170F);
background: -ms-linear-gradient(top, #E22E25, #AC170F);
background: -o-linear-gradient(top, #E22E25, #AC170F);
background: linear-gradient(to bottom, #E22E25, #AC170F);
filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#E22E25', EndColorStr='#AC170F');
border: 1px solid #B1241C;
text-align: center; /* to center the input and button inside your div */
width: 200px;
}
.calendar label { /* Hide the label from screen but make it readable by screen readers. Add .js before to apply this style when javascript is enable */
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
.datepicker,
.ui-datepicker-trigger {
vertical-align: middle; /* To align input and button */
cursor: pointer;
height: 28px;
}
.no-js .datepicker {
/* Style according to your need */
}
.datepicker { /* Add .js before so that this style is applied when javascript is enable */
background: none;
border: none;
color: #fff;
padding: 0;
display: none; /* Hide the input if no value has been entered */
}
.datepicker:focus {
outline: 0;
}
.ui-datepicker-trigger {
display: inline-block;
width: 28px;
border: none;
background: none;
padding: 0;
}
.ui-datepicker-trigger img {
max-width: 70%;
height: auto;
}
<!-- Jquery UI script -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<!-- end script -->
<div class="calendar">
<label for="datepicker">Choose a date with the following format: dd.mm.yy</label>
<input id="datepicker" type="text" class="datepicker" /> <!-- input elements don't have closing tag -->
</div>
然后将class="no-js"
添加到您的html并添加以下脚本,以便在启用javascript时将no-js
替换为js
:
<script>
document.documentElement.className = document.documentElement.className.replace("no-js","js");
</script>
您还可以使用Modernizr来了解您的客户端浏览器是否支持input type="date"
,以便在这种情况下您不会加载jQuery UI日期选择器并让浏览器处理该功能。
答案 2 :(得分:0)
谢谢大家一起思考。我已经有了解决方案。 谢谢Pipo!是的,一个解决方案就是使用datepicker输入 - 使用标准堆叠,就像你说的那样,但我需要隐藏输入而不是使用它。
解决方案包括一些javascript扩展。我在datepicker的onSelect事件中写了一些额外的js。我重写了在datepicker中生成的按钮的outerHTML,并在html中的按钮下面添加了timeperiod。所以结果将是这样的:
<div class="calendar">
<button class="ui-dp">
<div class="js-timeperiod timeperiod"></div>
</button>
</div>
现在我甚至不需要使用z-index,它适用于IE。