我想在我的一个文本输入中使用jQuery UI datepicker.这是一个对话模式.
实际上,我可以在正常的文本输入中调用datepicker,并且我正常收到我的日历,但是我不能在对话框模式文本输入中(在模态文本输入中碰巧,没有任何JavaScript错误之后).
@H_404_6@$(function() { $("#MytextInputID").datepicker({ dateFormat: 'dd/mm/yy' }); );我尝试更改css .ui-datepicker Z-index属性,但我仍然没有.
问候,
在my_page.html我有
@H_404_6@function openSaisieARModal() { window_select_CodeAgence = new showModalWindow('SaisieARModal',500); }我使用这个脚本
@H_404_6@var showModalWindow=function(id,width) { var newId=id+'Copy'; this.id=newId; @H_404_6@var prevIoUsNode=document.getElementById(newId);
if(prevIoUsNode!=null)
{
prevIoUsNode.parentNode.removeChild(prevIoUsNode);
}
var rootNode=document.getElementsByTagName('body')[0];
this.node=document.createElement("div");
rootNode.appendChild(this.node);
this.node.setAttribute('id',newId);
this.node.setAttribute('title',document.getElementById(id).getAttribute('title'));
this.node.innerHTML=document.getElementById(id).innerHTML;
if(width==null)
{
width=400;
}
$('#'+newId).dialog({autoOpen: true,modal: true,width:width });
this.closeWindow=function()
{
$('#'+this.id).dialog('close');
}
this.centerContent=function()
{
this.node.style.textAlign='center';
}
this.center=function()
{
$('#'+this.id).dialog('option','position','center');
}
}
这是my_page.html中的模态HTML代码
@H_404_6@<div style="display:none;">
<div id="SaisieARModal" title="DATE">
<table class="tableFrame" cellspacing="0px" width="100%">
<tr>
<td class="topLeft">
</td>
<td class="topCenter">
</td>
<td class="topRight">
</td>
</tr>
<tr>
<td class="middleLeft">
</td>
<td class="middleCenter">
<table>
<tr align="center">
<td>
Date
</td>
<td>
<input id="MyTextInputID" type="text" />
</td>
</tr>
</table>
</td>
<td class="middleRight">
</td>
</tr>
<tr>
<td class="bottomLeft">
</td>
<td class="bottomCenter">
</td>
<td class="bottomRight">
</td>
</tr>
</table>
<div>
</div>
</div>
</div>
var prevIoUsNode=document.getElementById(newId);
if(prevIoUsNode!=null)
{
prevIoUsNode.parentNode.removeChild(prevIoUsNode);
}
var rootNode=document.getElementsByTagName('body')[0];
this.node=document.createElement("div");
rootNode.appendChild(this.node);
this.node.setAttribute('id','center');
}<div style="display:none;">
<div id="SaisieARModal" title="DATE">
<table class="tableFrame" cellspacing="0px" width="100%">
<tr>
<td class="topLeft">
</td>
<td class="topCenter">
</td>
<td class="topRight">
</td>
</tr>
<tr>
<td class="middleLeft">
</td>
<td class="middleCenter">
<table>
<tr align="center">
<td>
Date
</td>
<td>
<input id="MyTextInputID" type="text" />
</td>
</tr>
</table>
</td>
<td class="middleRight">
</td>
</tr>
<tr>
<td class="bottomLeft">
</td>
<td class="bottomCenter">
</td>
<td class="bottomRight">
</td>
</tr>
</table>
<div>
</div>
</div>
</div>
解决方法
我嘲笑了一个很好的例子.您尝试更改ui-datepicker上的z-index,但是在查看Firebug中的呈现代码后,它看起来像您想要的id是ui-datepicker-div.我将z-index设置为9999,它显示在模态对话框的顶部.
@H_404_6@<script type='text/javascript'>
$(function() {
$("#datepicker").datepicker({ dateFormat: 'dd/mm/yy' });
});
function openmodal() {
var $dialogContent = $("#event_edit_container");
$dialogContent.dialog({
modal: true,title: "Test",close: function() {},buttons: {
save : function() {},cancel : function() {}
}
}).show();
$("#ui-datepicker-div").css("z-index","9999");
}
</script>
<div ><a href="javascript:openmodal();">Open modal</a></div>
<div id="event_edit_container" >
<form>
Date: <input type="text" id="datepicker" name="datepicker">
</form>
</div>
