0

ここで専門家の助けが必要です。

私のコードは素晴らしくてダンディで、「開く」ボタンがクリックされると一度だけうまく機能します。日付を選択すると、問題なく終了します。ただし、もう一度再度開くと、幅と高さが範囲外になり、UIダイアログの外観が異なります。私はここで何が間違っているのだろうか？

<html>

<head>

<!-- LOAD JQUERY LIBRARY: -->  
    <link   href="jq/jquery-ui.css"         type="text/css" rel="stylesheet" />
    <script src="jq/jquery.min.js"          type="text/javascript"> </script>
    <script src="jq/jquery-ui.min.js"       type="text/javascript"> </script>

<script type="text/javascript">
var z; 

function opendd() {

  $('#dd').dialog({  
       autoOpen:   true, 
       modal:      true, 
       overlay:    { opacity: 0.5, background: 'black'}, 
       title:      'Select the date:', 
       height:     215,  
       width:      234, 
       draggable:  false,  
       resizable:  false 

   });//end of dialog_atip 


  $("#B1").click(function(){  
        callback(); 
  }); 

  $('#d1').datepicker({ 
     onSelect:function(){ 
                    z = $(this).val(); 
                    alert(z); 
                    $("#dd").dialog("close"); 
     } 
  }); 

}//end of function


function callback() {  
    alert(z); 
} 
</script>


</head>

<body>
<a href="javascript:opendd()">open
</a>
<div style="display:none" id="dd">
<div id="d1">
</div>

</div>
<input type="button" value="CallbackValue" name="B1" id="B1"> 

</body>

</html>

事前にご協力とご支援を賜り、誠にありがとうございます。

ジェイ

4

2 に答える 2

0

説明した動作を複製することはできませんでしたが、一部の機能をjQueryが推奨するものに正確に書き直しました。これにより、問題が修正される可能性があります。

以下のコードブロックでは、ドキュメントの準備ができたらjQueryモーダルダイアログをインスタンス化し、毎回dialog（'open'）コマンドを実行して開閉します。（私はあなたのライブラリをテストのためにグーグルAPIと交換しました）。

これがあなたのために働くかどうか私に知らせてください:)

<html>

<head>

<!-- LOAD JQUERY LIBRARY: -->  
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css" type="text/css" media="all" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript">
var z; 

$(document).ready(function() {
    $('#dd').dialog({  
       autoOpen:   false, 
       modal:      true, 
       overlay:    { opacity: 0.5, background: 'black'}, 
       title:      'Select the date:', 
       height:     215,  
       width:      234, 
       draggable:  false,  
       resizable:  false 

    });//end of dialog_atip 
    $("#B1").click(function(){  
        callback(); 
    }); 
    $('#d1').datepicker({ 
        onSelect:function(){ 
                    z = $(this).val(); 
                    alert(z); 
                    $("#dd").dialog("close"); 
        } 
    }); 
});


function opendd() {
    $('#dd').dialog('open');
}//end of function


function callback() {  
    alert(z); 
} 
</script>


</head>

<body>
<a href="javascript:opendd()">open
</a>
<div style="display:none" id="dd">
<div id="d1">
</div>

</div>
<input type="button" value="CallbackValue" name="B1" id="B1"> 

</body>

</html>
于 2012-08-29T20:40:34.800 に答える
0

私もあなたの問題を再現することができませんでした、しかしあなたがそれを続ければ、あなたはのようなものを使うことができます$("#dd").dialog().option("height", 215)。詳細については、jqueryダイアログの高さオプション-実行時の高さの設定を参照してください。

たぶんCSSソリューションの方がいいでしょうか？

あなたはあなたが持っていることに気づきましたがautoOpen:true、あなたはそれを使いませんか？これはわざとですか？

これが私のJSFiddleです。

于 2012-08-29T21:00:23.073 に答える