2009-03-26 12 views
0

jQuery UI.Dialogを使用しています。小さな問題があります。リンクをクリックしてダイアログボックスを表示すると、#Testのテキストが消え、モーダルオーバーレイが表示されますが、実際のモーダルボックスは表示されません。jQuery UIダイアログのヘルプ

FireBugを使用するとダイアログボックスが作成されますが、「表示:なし」は表示されません。また、Firebugでこれを表示:ブロックに変更すると、ダイアログが表示されますが、それはページの左側にあります。提案はありますか?

私のコードは非常に簡単です:

<head> 
<link href="Vader/jquery-ui-1.7.1.custom.css" rel="stylesheet" type="text/css"> 
<script src="javascripts/jquery.js" type="text/javascript"></script> 
<script src="javascripts/ui.core.js" type="text/javascript"></script> 
<script src="javascripts/ui.draggable.js" type="text/javascript"></script> 
<script src="javascripts/ui.resizable.js" type="text/javascript"></script>    
<script src="javascripts/ui.dialog.js" type="text/javascript"></script>  
    <script type='text/javascript'> 
    $(function() { 
     $("a").click(function(){ 
      $('#Test').css('display','inline'); 
      $("#Test").dialog({modal: true}); 
     }); 
    }); 
</script> 
</head> 
<body> 
    <a href="#">Test</a> 
    <div id="Test" title="Test Title">Bla bla bla</div> 
</body> 

答えて

0

私の推測では、それはあなたのCSSファイルを拾っていないことになる、あなたはそれが実際に確認していますか?私の知る限り、あなたのコードと間違って何もない

は、次のテストは、ブロックレベルの構造、それはいくつかの問題を引き起こしている可能性がありますされていない私のサンドボックスファイル

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<!-- Above Doctype should provide S mode in Moz, Safari, Opera, IE8 and A (almost standards) in IE6/7 --> 
<head> 
    <meta http-equiv="Content-Type" content="application/text+html;utf-8"/> 

    <title>Sandbox</title> 
    <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> 

<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
    google.load("jquery", "1.3.2"); 
    google.load("jqueryui", "1.7.0"); 
</script> 
<script type="text/javascript"> 

     $(document).ready(function() { 
     $("a").click(function(){ 
      $('#Test').css('display','inline'); 
      $("#Test").dialog({modal: true}); 
     }); 


    }); 
</script> 
</head> 
<body> 
    <div id="container"> 
     <a href="#">Test</a> 
     <div id="Test" title="Test Title">Bla bla bla</div> 
    </div> 
</body> 

</html> 
+0

問題を見つけたと思う...私は、Aptana V1.2.1に付属しているJQueryを使用しています。校長エラー。私はこれで2つの変な日を過ごしました。 ありがとうございました。 –

+0

これは、私がテストしているとき、私は常にjqueryとcss/uiを外部サーバーから提供しているからです:) – Steerpike

0

< A>で動作します。

DIVでラッピングしてから、代わりにそのdivを作成してみてください。

0

同じ問題があり、CSSファイルが見つからないことが判明しました。 Firebugを使用して、cssファイルをロードします。 Firebugに表示される内容は、「404 Not found」であることがわかります。

3

クリックをe.preventDefault()に追加したい場合があります。ページを更新する#を読み込もうとしません。

$("a").click(function(e){ 
     e.preventDefault(); 
     $('#Test').css('display','inline'); 
     $("#Test").dialog({modal: true}); 
    });