2013-01-12 60 views
0

我有一個jQuery UI對話框中的dojo dijit datetextbox ..顯示在對話框後面(underlayed)的datetextbox日曆。我使用IE7 ..看我下面的代碼..dijit datetextbox背後的jQuery UI對話框

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

任何解決方案來解決這個問題

+0

你的問題是什麼? – udo

+0

我認爲我的答案[_Dojo下拉按鈕內部jQuery UI dialog_](http://stackoverflow.com/questions/12176178/dojo-drop-down-button-inside-jquery-ui-dialog/12177606#12177606)可能適用於你的問題。 – phusick

+0

我試過這個解決方案,但沒有奏效。如果您可以嘗試在jsfiddle中發佈上述鏈接 – programmermurali

回答

0

我所解決的問題添加zIndex:-1與jQuery對話框如下:

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

});