Question

我在jquery ui对话框中有一个dojo dijit datetextbox ..日期文本框日历显示在对话框的后面（底层）。我正在使用ie7 ..请参阅下面的代码..

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>
</title>
<script type="text/javascript" src="jQuery/jquery-1.8.3.js" ></script>
<script type="text/javascript" src="jQuery/jquery-ui-1.9.2.custom.min.js" ></script>
<script type="text/javascript" src="dojo/dojo/dojo.js" djConfig="parseOnLoad: true, isDebug: false"></script>
<script>dojoConfig = {parseOnLoad: true}</script><script src='dojo/dojo/dojo.js'></script><script>require(["dojo/parser", "dijit/form/DateTextBox"]);</script>
<link rel="stylesheet" type="text/css" href="jQuery/jquery-ui-1.8.11.custom.css" />
<link rel="stylesheet" type="text/css" href="dojo/dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css" href="dojo/dijit/themes/claro/claro.css" />
</head>
<body class="claro">
please click the above button to show the dialog
<br>
<input type="button" id="clickme" value="Click Me"/>
    <div id="popupdialog">
        <label for="date1">Drop down Date box:</label>
<input type="text" name="date1" id="date1" value="2005-12-30" data-dojo-type="dijit/form/DateTextBox" required="true" />
    </div>
<script type="text/javascript" >
        $(document).ready(function() {
$("#popupdialog").dialog({
    width:400,
    height:200,
    modal:false,
    position:'center',
    autoOpen:false
});
$('#clickme').click(function(){
            $('#popupdialog').dialog("open");
        });
});
    </script>
</body>
</html>

请参阅下图：

http://i50.tinypic.com/2edzgue.jpg

解决此问题的任何解决方案

Answer 1

我通过将 zIndex：-1 添加到jQuery对话框来解决了这个问题，如下所示：

$("#popupdialog").dialog({
width:400,
height:200,
modal:false,
position:'center',
autoOpen:false,
zIndex: -1

}）;

dijit datetextbox在jquery ui对话框后面

1 个答案: