2009-06-18 4 views
1
, 여기에 HTML, CSS의

, 그리고 자바 스크립트는 결합 :CSS가있는 Jquery UI 대화 상자의 테마 요소 ... 어떻게? 이전 버전은 분명히 너무 열심히 사람들이 이해하기 이었기 때문에

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
     <title>test title</title> 
     <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.2/jquery-ui.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
       $('#test').dialog({ autoOpen: false, modal: true }); 
       $("#test-link").click(function() { 
        $('#test').dialog('open'); 
       }); 
      }); 
     </script> 
     <style type="text/css"> 
      div#main div#test label { 
       display: block; 
      } 
      div#main div#test input { 
       padding-left: 100px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="main"> 
      <p><a href="#" id="test-link">test</a><p> 
      <div id="test" title="Submit Bug or Feature Request"> 
       <form> 
        <label for="test_desc">Short Description:</label> 
        <input type="text" name="test_desc" id="test_desc" value="" /> 
        <input type="submit" name="" value="Submit" /> 
       </form> 
      </div> 

     </div> 
    </body> 
</html> 

대화가 잘 작동하지만, CSS하지 않습니다. 어떤 아이디어?

답변

1

JQuery는 대화 상자의 DIV를 DOM 트리에서 이동하고 다른 항목으로 감싼다. 따라서 CSS 선택기가 작동하지 않습니다. 위의 예제를 사용하면 다음과 같이해야합니다.

0

CSS가 작동해야합니다. 그것은 css 규칙 캐스케이드 방법에 문제가있을 수 있습니다. "#dialog div # test label"과 같은 규칙을 적용하는 더 구체적인 선택 도구가 있습니까? html/css의 나머지가 없으면 세부 사항을 지적하는 것은 불가능합니다. 방화 광케이프를 가져 와서 해당 요소에 어떤 규칙이 적용되는지 확인하십시오.

+0

내가 여기에 투표를 한 이유가 확실하지 않습니다. 원래의 질문에는 불완전한 정보가있었습니다. 원래 정보를 바탕으로 좋은 추측이었습니다. – tom