为什么jQuery UI datepicker在jQuery对话框模式中工作？

Question

我想在我的一个文本输入中使用jQuery UI datepicker.这是一个对话模式.

实际上,我可以在正常的文本输入中调用datepicker,并且我正常收到我的日历,但是我不能在对话框模式文本输入中(在模态文本输入中碰巧,没有任何JavaScript错误之后).

这是我的代码来调用datepicker：

$(function() {
    $("#MytextInputID").datepicker({ dateFormat: 'dd/mm/yy' });
);

我尝试更改css .ui-datepicker Z-index属性,但我仍然没有.

你有提示来解决这个问题吗？

问候,

在my_page.html我有

function openSaisieARModal()
        {
            window_select_CodeAgence = new showModalWindow('SaisieARModal',500);
        }

我使用这个脚本

var showModalWindow=function(id,width)
{
    var newId=id+'copy';
    this.id=newId;

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代码

<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>

Answer 1

我嘲笑了一个很好的例子.您尝试更改ui-datepicker上的z-index,但是在查看Firebug中的呈现代码后,它看起来像您想要的id是ui-datepicker-div.我将z-index设置为9999,它显示在模态对话框的顶部.

<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>

为什么jQuery UI datepicker在jQuery对话框模式中工作？

解决方法

随机推荐