2009-03-26 6 views
0

jQuery UI.Dialog를 사용하고 있습니다. 작은 문제가 있습니다. 대화 상자를 표시 할 링크를 클릭하면 #Test의 텍스트가 사라지고 모달 오버레이가 표시되지만 실제 모달 상자는 표시되지 않습니다.jQuery UI 대화 상자에 대한 도움말

FireBug를 사용하면 대화 상자가 생성되지만 표시 : 없음이 표시되지 않습니다. 또한 Firebug에서이 파일을 Display : Block으로 변경하면 대화 상자가 표시되지만 내 페이지의 왼쪽에 있습니다 ... 제안 사항이 있습니까?

내 코드는 매우 간단하다 :

<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 파일을 찾을 수없는 것으로 나타났습니다. 파이어 버그를 사용하여 CSS 파일을로드하십시오. Firebug에 표시되는 내용은 "404 찾을 수 없음"입니다.

3

클릭에 e.preventDefault()를 추가 할 수 있습니다. 페이지를 새로 고칠 수있는 #을로드하려고하지 않습니다.

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