1

古いバージョンは明らかに人々が理解するには難しすぎるので、HTML、CSS、およびJavaScriptを組み合わせたものを次に示します。

$(document).ready(function() {
  $('#test').dialog({
    autoOpen: false,
    modal: true
  });
  $("#test-link").click(function() {
    $('#test').dialog('open');
  });
});
div#main div#test label {
  display: block;
}

div#main div#test input {
  padding-left: 100px;
}
<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>

<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>

ダイアログは正常に機能しますが、CSSは機能しません。なぜ何かアイデアはありますか？

4

2 に答える 2

1

JQueryはダイアログのDIVをDOMツリーに移動し、他のいくつかでラップします。したがって、CSSセレクターは機能しません。上記の例を使用すると、次のようなことを行う必要があります。

div.ui-dialog div#test label {
    display: block;
}
div.ui-dialog div#test input {
    padding-left: 100px;
}
于 2009-06-19T02:00:03.073 に答える
0

cssは機能するはずです。cssルールのカスケード方法に問題がある可能性があります。「＃dialogdiv＃testlabel」のようなこれらのルールを適用するより具体的なセレクターはありますか？残りのhtml/cssがなければ、詳細を指摘することは不可能です。Firebugを入手して、それらの要素にどのルールが適用されているかを確認してください。

于 2009-06-19T01:01:55.093 に答える