简单的jquery对话框

  <div class="weibo-box-close">
    <a>关闭</a>
  </div></p>
</div>

<div class="weibo-box-main">
  <div class="clearfix">
  </div>
  
  <div class="weibo-text-area">
    <textarea name="weibo-text-editor-global" class="weibo-text-editor" id="weibo-text-editor-global" cols="60" rows="3"></textarea>
  </div>
  
  <div class="weibo-button-container">
    <div class="button floatright">
      发微博
    </div></p>
  </div>
  
  <div class="clear">
  </div></p>
</div></p>

[/html]
对应的CSS
[css]
.global-widget-container{
position:absolute;
height:100%;
width:100%;
top:0;
left:0;
z-index:4000;
background-color:
}
.global-widget-container .weibo-box{
background-color:white;
position:absolute;
top:100px;
left:50%;
width:600px;
margin-left:-300px;
border: 2px solid #666;*/
}
.weibo-box .weibo-box-header{
height:30px;
line-height:30px;
font-size:14px;
padding-left:10px;
padding-right:10px;
width:580px;
float:left;
}
.weibo-box .weibo-box-header h3{
font-size:16px;
margin:0;
display:inline;
}
.weibo-box .weibo-box-header .weibo-box-close{
float:right;
}
.weibo-box .weibo-box-main{
/* padding:0 15px 15px;*/
}
.weibo-box .weibo-box-main .weibo-text-area{
height:90px;
}
.weibo-box .weibo-box-main .weibo-text-area .weibo-text-editor{
margin:0;
padding:10px 5px 0 5px;
width:550px;
height:70px;
font-size:16px;
line-height:18px;
}
[/css]
2. 背景层。在body中加上个overlay组件，用于填充整个屏幕空间。定位用position:absolute，偏移用0，赋予次一级的z-index值，例如400。关键在于背景颜色要用rgba，比rgb多一个a通道，给出透明度，这样可以实现加深背景的效果。
jquery ui中的ui-widget-overlay就是这种效果。
[html]

[/html]
最后，js代码如下
[javascript]
$(“.topbar-send-weibo-button”).click(function(){
$(“.weibo-box-container”).show();
$(“.global-widget-overlay”).show();
$(“.weibo-box-close”).click(function(){
$(“.weibo-box-container”).hide();
$(“.global-widget-overlay”).hide();
});
$(“.weibo-box-container”).dialog(“open”);
});
[/javascript]
最后的效果是这样的：

[](//photo.weibo.com/1258138680/photos/large/photo_id/3454020673496025)

[](//photo.weibo.com/1258138680/photos/large/photo_id/3454020665411628)