jquery中 ColorPicker如何放dialog里面

下面的代码大家应该很熟悉
<script type="text/javascript">
$(document).ready(function() {
var $dialog = $('<div></div>')
.html('This dialog will show every time!')
.dialog({
autoOpen: false,
title: 'Basic Dialog'
});

$('#opener').click(function() {
$dialog.dialog('open');
});
});
</script>

单显示这样的文字用处不大，我想把一个ColorPicker放dialog里面，为此，我修改如下
<script type="text/javascript">
$(document).ready(function() {
var $dialog = $('<div></div>')
.html('<div id="mydiv"></div>')
.dialog({
autoOpen: false,
title: 'Basic Dialog'
});

$('#mydiv').ColorPicker
({
flat: true
})


$('#opener').click(function() {
$dialog.dialog('open');
});
});
</script>
可是出的的对话框除了几个显示颜色数字的文本框以外就没任何东西了，。。。。上面的应该怎么修改才能显示正确的ColorPicker呢？？