2012-06-22 9 views
1

버튼을 클릭했지만 어떤 이유로 든 jquery 대화 상자가 나타나기를 바랍니다 (일부 샘플 코드에서). 당신이 도움이 될 수 있습니다 희망 :대화 상자가 표시되지 않습니다

<html>  
<head> 
    <script type="text/javascript" src="jquery.js"/> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      var $dialog = $('<div></div>') 
       .html('This dialog will show every time!') 
       .dialog({ 
        autoOpen: true, 
        title: 'Pick A Time Period:' 
       }); 

      $('#reports').click(function() { 
       $dialog.dialog('open'); 
       // prevent the default action, e.g., following a link 
       return false; 
      }); 
     }) 
    </script> 
</head> 
<body> 
    <button id="reports">Hi</button> 
</body> 
</html> 

편집 : 죄송합니다 사람이, JQueryUI는 별도의 파일임을 인식하지 않았다.

<html>  
<head> 
    <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" /> 
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 
    <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      var $dialog = $('<div></div>') 
       .html('This dialog will show every time!') 
       .dialog({ 
        autoOpen: true, 
        title: 'Pick A Time Period:' 
       }); 

      $('#reports').click(function() { 
       $dialog.dialog('open'); 
       // prevent the default action, e.g., following a link 
       return false; 
      }); 
     }) 
    </script> 
</head> 

<body> 
    <button id="reports">Hi</button> 
</body> 
</html> 
+10

먼저 ''으로 닫아야합니다. 다음으로 * jqueryui.js *가 어디에 있습니까? – VisioN

+2

지적한대로 [jQuery UI] (http://jqueryui.com/)가 필요합니다. 그렇지 않으면, [it works] (http://jsfiddle.net/LTZpB/). –

답변

1

은 다음과 같아야합니다 : 그것은 나에게 새로운 모든 그래서 단지 내가 지금 JQueryUI 파일에 대한 올바른 스크립트 라인을 추가하고 여전히 어떤 이유로 작동하지 않는 한

JQuery와 오늘 학습

<script type="text/javascript" src="jquery.js"></script> 
1

이 줄은 jquery 대화 스크립트 바로 앞에있는 head 태그 사이에 있으며 여러분이 가지고있는 것을 볼 수 있습니다!

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script> 
관련 문제