diff --git a/bricks/build.sh b/bricks/build.sh
index 5acde74..8a1a0f7 100755
--- a/bricks/build.sh
+++ b/bricks/build.sh
@@ -1,6 +1,6 @@
 SOURCES=" page_data_loader.js factory.js uitypesdef.js utils.js uitype.js \
 	i18n.js widget.js layout.js bricks.js image.js html.js \
-	jsoncall.js myoperator.js scroll.js menu.js modal.js running.js \
+	jsoncall.js myoperator.js scroll.js menu.js popup.js modal.js running.js \
 	markdown_viewer.js video.js audio.js toolbar.js tab.js \
 	input.js registerfunction.js button.js accordion.js dataviewer.js \
 	tree.js multiple_state_image.js dynamiccolumn.js form.js message.js conform.js \
diff --git a/bricks/popup.js b/bricks/popup.js
index b75a4e9..a60bc39 100644
--- a/bricks/popup.js
+++ b/bricks/popup.js
@@ -4,22 +4,65 @@ 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:
 	*/
 	constructor(opts){
 		super();
 		this.auto_task = null;
+		this.issub = false;
 		this.set_css('popup');
 		const zindex = bricks.app.new_zindex();
 		this.set_style('zIndex', zindex);
+	}
+	add_widget(w, index){
+		super().add_widget(w, index);
+		if (this.auto_open){
+			this.open();
+		}
+	}
+	transform2screen_at(rect, lt){
+		var screen_rect = bricks.Body.showRectage();
+		top = rect.top + parseInt(lt.y) / 100 * rect.height;
+		left = rect.left + parseInt(lt.x) / 100 * rect.width;
+		return {
+			top:top + 'px';
+			left:left + 'px';
+		}
+	}
+	convert_width(){
+		
 	}
 	open(){
-		var rect = this.parent.showRectage();
+		var rect;
+		var w;
+		if (this.widget isinstanceof bricks.Widget){
+			rect = this.widget.showRectage()
+			this.issub = true;
+		} else if (this.widget isinstanceof String){
+			var w = bricks.getWidgetById(this.widget, bricks.Body);
+			if (!w){
+				ithis.issub = true
+				rect = bricks.Body.showRectage();
+			}
+		} else {
+			rect = bricks.Body.showRectage();
+		}
+		var lt = archor_at(this.archor);
 		this.set_style('display', 'block');
-		this.set_style('top',`${rect.top + window.scrollY}px`);
-		thos.set_style('left',`${rect.left + window.scrollX}px`);
-		this.set_style('width', `${rect.width}px`);
-		this.set_style('height', `${rect.height}px`);
+		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 (this.height && this.height.endsWith('%')){
+				this.set_style('height', parseFloat(rect.height) * parseFloat(this.height) + 'px');
+			}
+		}
+		this.set_style('top',lt.top);
+		thos.set_style('left',lt.left);
 		if (this.timeout > 0){
 			this.auto_task = schedule_once(this.auto_dismiss.bind(this), this.timeout)
 		}
@@ -32,3 +75,5 @@ bricks.Popup = class extends bricks.VBox {
 		this.set_css('display':'none');
 	}
 }
+
+bricks.Functory.register('Popup', bricks.Popup);
diff --git a/bricks/utils.js b/bricks/utils.js
index 810377e..6c4e4dc 100755
--- a/bricks/utils.js
+++ b/bricks/utils.js
@@ -195,7 +195,7 @@ bricks.obj_fmtstr = function(obj, fmt){
 	return s;
 }
 
-var archorize = function(ele,archor){
+var archor_at(archor){
 	/* archor maybe one of the:
 	"tl", "tc", "tr",
 	"cl", "cc", "cr",
@@ -235,8 +235,18 @@ var archorize = function(ele,archor){
 			x = '50%';
 			break;
 	}
-	ele.style.top = y;
-	ele.style.left = x;
+	return {
+		x:x,
+		y:y,
+		top:y,
+		left:x
+	}
+}
+
+var archorize = function(ele,archor){
+	var lt = archorAt(archor);
+	ele.style.top = lt.top;
+	ele.style.left = lt.left;
 	var o = {
 		'x':x,
 		'y':y