diff --git a/bricks/css/bricks.css b/bricks/css/bricks.css
index f026bc2..7b8938d 100755
--- a/bricks/css/bricks.css
+++ b/bricks/css/bricks.css
@@ -46,8 +46,17 @@ body {
 	grid-gap: 1px;
 }
 
+.resizebox {
+	width: 10px;
+	height: 10px;
+	background-color: darkblue;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	cursor: se-resize; /* 改变鼠标指针样式 */
+}
 .popup {
-	display:none;
+	display: none;
 	position: absolute;
 	box-sizing: border-box; /* 包括边框在内计算宽度和高度 */
 	color: #111111;
@@ -119,7 +128,7 @@ body {
 }
 
 .scroll {
-	overflow:scroll;
+	overflow: auto;
 }
 
 .vcontainer {
@@ -149,7 +158,7 @@ body {
 .filler, .hfiller, .vfiller {
 	flex: auto;
 	flex-grow: 1;
-	overflow:hidden;
+	overflow:hidden; 
 }
 
 .vfiller .vbox:last-child {
diff --git a/bricks/dataviewer.js b/bricks/dataviewer.js
index 0f16600..03c0f33 100644
--- a/bricks/dataviewer.js
+++ b/bricks/dataviewer.js
@@ -215,6 +215,10 @@ bricks.DataViewer = class extends bricks.VBox {
 			fs.push(this.fields[i]);
 		}
 		var f = new bricks.ModalForm({
+				"widget":this,
+				"movable":true,
+				"resizable":true,
+				"archor":"cc",
 				"width":"90%",
 				"height":"70%",
 				"submit_url":this.editable.new_data_url,
@@ -239,6 +243,10 @@ bricks.DataViewer = class extends bricks.VBox {
 			fields.push(f);
 		}
 		var f = new bricks.ModalForm({
+				"widget":this,
+				"movable":true,
+				"resizable":true,
+				"archor":"cc",
 				"width":"90%",
 				"height":"70%",
 				"submit_url":this.editable.update_data_url+'?id=' + record.id,
diff --git a/bricks/menu.js b/bricks/menu.js
index 85b80a0..f0a7d97 100755
--- a/bricks/menu.js
+++ b/bricks/menu.js
@@ -33,7 +33,7 @@ bricks.Menu = class extends bricks.VBox {
 				}
 			}
 			var w = await bricks.widgetBuild(desc, this);
-			if (w){
+			if (w && ! w.parent){
 				t.clear_widgets();
 				t.add_widget(w);
 			} else {
diff --git a/bricks/message.js b/bricks/message.js
index 1eb2f5e..f71f59b 100644
--- a/bricks/message.js
+++ b/bricks/message.js
@@ -1,6 +1,6 @@
 var bricks = window.bricks || {};
 
-bricks.Message = class extends bricks.Modal {
+bricks.Message = class extends bricks.PopupWindow {
 	/* 
 	{
 		title:
@@ -43,23 +43,5 @@ bricks.show_message = function(opts){
 	w.open();
 }
 
-bricks.PopupForm = class extends bricks.VBox {
-	/* 
-	{
-		form:{
-		}
-	}
-	*/
-	constructor(options){
-		super(options);
-		this.form = new bricks.Form(this.opts.form);
-		this.add_widget(this.form);
-		this.form.bind('submit', this.close_popup.bind(this));
-		this.form.bind('discard', this.close_popup.bind(this));
-	}
-	close_popup(e){
-		this.dismiss();
-	}
-}
 bricks.Factory.register('Message', bricks.Message);
 bricks.Factory.register('Error', bricks.Error);
diff --git a/bricks/modal.js b/bricks/modal.js
index a83f7f1..e1f8695 100755
--- a/bricks/modal.js
+++ b/bricks/modal.js
@@ -167,7 +167,7 @@ bricks.Modal = class extends bricks.BaseModal {
 	*/
 }
 
-bricks.ModalForm = class extends bricks.Modal {
+bricks.ModalForm = class extends bricks.PopupWindow {
 	/*
 	{
 		auto_open:
diff --git a/bricks/popup.js b/bricks/popup.js
index 02fa3a2..6e5c51b 100644
--- a/bricks/popup.js
+++ b/bricks/popup.js
@@ -4,12 +4,14 @@ bricks.Popup = class extends bricks.VBox {
 	/*
 	{
 		timeout:0
-		auto_open:
 		archor:one of ['tl', 'tc', 'tr', 'cl', 'cc', 'cr', 'bl','bc', 'br']
 		widget:null for bricks.Body, string value for widget's id or a widget object;
-		auto_dismiss:
-		auto_destroy:
-		movable:
+		auto_open:boolean
+		auto_dismiss:boolean
+		auto_destroy:boolean
+		movable:boolean
+		resizable:boolean
+		modal:boolean
 	*/
 	constructor(opts){
 		super(opts);
@@ -24,12 +26,66 @@ bricks.Popup = class extends bricks.VBox {
 		if (this.auto_dismiss){
 			bricks.Body.bind('click', this.click_outside.bind(this));
 		}
+		this.target_w = bricks.Body;
 		this.moving_status = false;
 		if (this.movable){
 			this.setup_movable();
-			console.log('movable ...');
+			// console.log('movable ...');
 		}
+		if (this.resizable){
+			this.setup_resizable();
+		}
+		this.set_style('display', 'none');
+		bricks.Body.add_widget(this);
 	}
+	setup_resizable(){
+		this.resizable_w = new bricks.Icon({rate:1.5, url:bricks_resource('imgs/right-bottom-triangle.png')});
+		this.old_add_widget(this.resizable_w);
+		this.resizable_w.set_css('resizebox');
+		this.resizable_w.bind('mousedown', this.resize_start_pos.bind(this));
+		bricks.Body.bind('mousemove', this.resizing.bind(this));
+		bricks.Body.bind('mouseup', this.stop_resizing.bind(this));
+	}
+	resize_start_pos(e){
+		if (e.target != this.resizable_w.dom_element) 
+		{
+			// console.log('not event target');
+			return;
+		}
+		var rect = this.showRectage();
+		this.resize_status = true;
+		this.s_offsetX = e.clientX;
+		this.s_offsetY = e.clientY;
+		this.s_width =  rect.width;
+		this.s_height = rect.height;
+		e.preventDefault();
+		// console.log('resize_start_pos():', this.s_width, this.s_height, this.s_offsetX, this.s_offsetY);
+	}
+	resizing(e){
+		if (e.target != this.resizable_w.dom_element){
+			this.stop_resizing();
+			// console.log('resizing(): not event target');
+			return;
+		}
+		if (!this.resize_status){
+			// console.log('resizing(): not in resize status');
+			return;
+		}
+		var cx, cy;
+		cx = this.s_width + e.clientX - this.s_offsetX;
+		cy = this.s_height + e.clientY - this.s_offsetY;
+		this.set_style('width', cx + 'px');
+		this.set_style('height',  cy + 'px');
+		// console.log('resizing():', this.resize_status, cx, cy);
+		e.preventDefault();
+	}
+	stop_resizing(e){
+		this.resize_status = false;
+		bricks.Body.unbind('mousemove', this.resizing.bind(this));
+		bricks.Body.unbind('mouseup', this.stop_resizing.bind(this));
+		// console.log('stop_resizing():', this.resize_status);
+	}
+
 	setup_movable(){
 		this.moving_w.bind('mousedown', this.rec_start_pos.bind(this));
 		this.moving_w.bind('touchstart', this.rec_start_pos.bind(this));
@@ -37,7 +93,7 @@ bricks.Popup = class extends bricks.VBox {
 	rec_start_pos(e){
 		if (e.target != this.moving_w.dom_element) 
 		{
-			console.log('moving star failed', e.target, this.moving_w.dom_element, 'difference  ...');
+			// console.log('moving star failed', e.target, this.moving_w.dom_element, 'difference  ...');
 			return;
 		}
 		this.moving_status = true;
@@ -48,15 +104,15 @@ bricks.Popup = class extends bricks.VBox {
 		this.moving_w.bind('mousemove', this.moving.bind(this));
 		this.moving_w.bind('touchmove', this.moving.bind(this));
 		e.preventDefault();
-		console.log('moving started ...');
+		// console.log('moving started ...');
 	}
 	moving(e){
 		if (e.target != this.moving_w.dom_element){
-			console.log('moving failed', e.target, this.moving_w.dom_element, 'difference  ...');
+			// console.log('moving failed', e.target, this.moving_w.dom_element, 'difference  ...');
 			this.stop_moving();
 		}
 		if (!this.moving_status){
-			console.log('moving failed', 'not started  ...');
+			// console.log('moving failed', 'not started  ...');
 			return;
 		}
 		var cx, cy;
@@ -66,7 +122,7 @@ bricks.Popup = class extends bricks.VBox {
 		this.set_style('top',  cy + 'px');
 	}
 	stop_moving(e){
-		console.log('stop moving ....');
+		// console.log('stop moving ....');
 		this.moving_status = false;
 		this.moving_w.unbind('mousemove', this.moving.bind(this));
 		this.moving_w.unbind('touchmove', this.moving.bind(this));
@@ -95,31 +151,34 @@ bricks.Popup = class extends bricks.VBox {
 		}
 	}
 	open(){
-		var rect;
+		var rect, w, h;
 		if (this.opened) {
 			return;
 		}
 		this.opened = true;
 		if (this.widget instanceof bricks.JsWidget){
-			rect = this.widget.showRectage()
+			this.target_w = this.widget;
 			this.issub = true;
 		} else {
 			var w = bricks.getWidgetById(this.widget, bricks.Body);
 			if (w){
 				this.issub = true
-				rect = w.showRectage();
-			} else {
-				rect = bricks.Body.showRectage();
-			}
+				this.target_w = w;
+			} 
 		}
+		rect = this.target_w.showRectage();
 		var lt = archor_at(this.archor);
 		if (this.issub){
 			lt = this.transform2screen_at(rect, lt);
-			if (this.width && this.width.endsWith('%')){
-				this.set_style('width', parseFloat(rect.width) * parseFloat(this.width) + 'px');
+			if (typeof(this.width) == 'string' && this.width.endsWith('%')){
+				w = parseFloat(rect.width) * parseFloat(this.width) / 100;
+				this.set_style('width', w + 'px');
+				console.log('rect=', rect, 'w=', w);
 			}
-			if (this.height && this.height.endsWith('%')){
-				this.set_style('height', parseFloat(rect.height) * parseFloat(this.height) + 'px');
+			if (typeof(this.height) == 'string' && this.height.endsWith('%')){
+				h = parseFloat(rect.height) * parseFloat(this.height) / 100;
+				this.set_style('height', h + 'px');
+				console.log('rect=', rect, 'h=', h);
 			}
 		}
 		this.set_style('top',lt.top);
@@ -128,8 +187,14 @@ bricks.Popup = class extends bricks.VBox {
 		if (this.timeout > 0){
 			this.auto_task = schedule_once(this.auto_dismiss.bind(this), this.timeout)
 		}
+		if (this.opts.modal){
+			this.target_w.disabled(true);
+		}
 	}
 	dismiss(){
+		if (this.opts.modal){
+			this.target_w.disabled(false);
+		}
 		this.opened = false;
 		if (this.auto_task){
 			this.auto_task.cancel();
@@ -141,6 +206,9 @@ bricks.Popup = class extends bricks.VBox {
 		}
 	}
 	destroy(){
+		if (this.opened){
+			this.dismiss();
+		}
 		if (this.parent){
 			this.parent.remove_widget(this);
 			this.parent = null;
@@ -149,19 +217,45 @@ bricks.Popup = class extends bricks.VBox {
 }
 
 bricks.PopupWindow = class extends bricks.Popup {
+	/*
+	{
+		title:
+		icon:
+		params:
+		url:
+	}
+	*/
 	constructor(opts){
 		super(opts);
 		this.title_bar = new bricks.HBox({cheight:1, width:'100%'});
 		this.title_bar.set_css('titlebar')
-		this.content_w = new bricks.Filler({});
 		this.auto_destroy = false;
 		this.moving_w = this.title_bar;
 		this.old_add_widget = bricks.Layout.prototype.add_widget.bind(this);
 		this.old_add_widget(this.title_bar);
-		this.old_add_widget(this.content_w);
 		this.build_title_bar();
+		var filler = new bricks.Filler({});
+		this.old_add_widget(filler)
+		this.content_w = new bricks.VScrollPanel({width:"100%"});
+		filler.add_widget(this.content_w);
+	}
+	async load_content(){
+		var dic = {
+			"widgettype":"urlwidget",
+			"options":{
+				"params":this.params,
+				"url":this.url
+			}
+		}
+		var w = bricks.widgetBuild(dic, bricks.Body);
+		this.add_widget(w);
 	}
 	build_title_bar(){
+		var icon = new bricks.Icon({
+			rate:this.opts.rate,
+			url:this.opts.icon || bricks_resource('imgs/app.png')
+		});
+		this.title_bar.add_widget(icon);
 		this.tb_w = new bricks.IconBar( {
 			cheight:1,
 			margin:'5px',
@@ -191,6 +285,15 @@ bricks.PopupWindow = class extends bricks.Popup {
 		this.tb_w.bind('delete', this.destroy.bind(this));
 		this.tb_w.bind('minimax', this.dismiss.bind(this));
 		this.tb_w.bind('fullscreen', this.enter_fullscreen.bind(this));
+		if (this.title){
+			this.title_w = new bricks.Text({text:this.title});
+			this.title_bar.add_widget(this.title_w);
+		}
+	}
+	set_title(txt){
+		if (this.title_w){
+			this.title_w.set_text(txt);
+		}
 	}
 	add_widget(w, index){
 		this.content_w.add_widget(w, index);
@@ -216,6 +319,21 @@ bricks.PopupWindow = class extends bricks.Popup {
 		super.dismiss()
 	}
 }
+bricks.Dock = class extends bricks.HBox {
+	constructor(opts){
+		opts.cheight = opts.cheight || 2;
+		opts.width = opts.width || "80%";
+		super(opts);
+		this.set_css('scroll');
+		this.pw = [];
+	}
+	add_popupwindow(pw){
+		var info = pw.get_window_info();
+		
+	}
+	del_popupwindow(pw){
+	}
+}
 
 bricks.Factory.register('Popup', bricks.Popup);
 bricks.Factory.register('PopupWindow', bricks.PopupWindow);
diff --git a/bricks/widget.js b/bricks/widget.js
index ef72f5e..5566ee7 100755
--- a/bricks/widget.js
+++ b/bricks/widget.js
@@ -65,8 +65,10 @@ bricks.JsWidget = class {
 	disabled(flag){
 		if(flag){
 			this.dom_element.disabled = true;
+			this.set_style('pointerEvents', 'none');
 		} else {
 			this.dom_element.disabled = false;
+			this.set_style('pointerEvents', 'auto');
 		}
 	}
 	opts_set_style(){