简单的jquery对话框

目录

中午想在网页上加个发微博的对话框,研究半天twitter的那个十分简洁的对话框,自己写了一个。再一次被CSS定位搞得头破血流,调格式调个半天。

[Twitter Dialog](//photo.weibo.com/1258138680/photos/large/photo_id/3454020665107376)
Twitter发微博对话框
对话框的关键在于定位,对话框要在页面最上方,模式对话框还最好把页面其余部分变暗,突出显示当前的对话框。这就需要用到css中的z-index属性和rgba颜色。主要由两个部分组成。 1. 对话框。在定位用position:absolute,指定偏移位置。赋予最高的z-index值,例如4000等。 对话框的HTML代码 [html][/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)
自制对话框的效果
写了这个后发现效果简直太差了,不如直接用jquery ui中的dialog,方便易用,有现成的可以高效率使用,我还去浪费时间搞这个干啥。即便jquery ui不太好看,也凑合用吧。 用jquery ui dialog的效果如下:
[jquery ui dialog效果](//photo.weibo.com/1258138680/photos/large/photo_id/3454020665411628)
jquery ui dialog效果