diff --git a/Android/doric/src/main/java/pub/doric/plugin/ModalPlugin.java b/Android/doric/src/main/java/pub/doric/plugin/ModalPlugin.java
index 98ff295e..2122f284 100644
--- a/Android/doric/src/main/java/pub/doric/plugin/ModalPlugin.java
+++ b/Android/doric/src/main/java/pub/doric/plugin/ModalPlugin.java
@@ -15,16 +15,20 @@
  */
 package pub.doric.plugin;
 
+import android.view.Gravity;
 import android.widget.Toast;
 
 import pub.doric.DoricContext;
 import pub.doric.extension.bridge.DoricPlugin;
 import pub.doric.extension.bridge.DoricMethod;
 import pub.doric.extension.bridge.DoricPromise;
+import pub.doric.utils.DoricUtils;
 import pub.doric.utils.ThreadMode;
 
 import com.github.pengfeizhou.jscore.ArchiveException;
 import com.github.pengfeizhou.jscore.JSDecoder;
+import com.github.pengfeizhou.jscore.JSObject;
+import com.github.pengfeizhou.jscore.JSValue;
 
 /**
  * @Description: Doric
@@ -41,7 +45,25 @@ public class ModalPlugin extends DoricJavaPlugin {
     @DoricMethod(name = "toast", thread = ThreadMode.UI)
     public void toast(JSDecoder decoder, DoricPromise promise) {
         try {
-            Toast.makeText(getDoricContext().getContext(), decoder.string(), Toast.LENGTH_SHORT).show();
+            JSObject jsObject = decoder.decode().asObject();
+            String msg = jsObject.getProperty("msg").asString().value();
+            JSValue gravityVal = jsObject.getProperty("gravity");
+            int gravity = Gravity.BOTTOM;
+            if (gravityVal.isNumber()) {
+                gravity = gravityVal.asNumber().toInt();
+            }
+            Toast toast = Toast.makeText(getDoricContext().getContext(),
+                    jsObject.getProperty("msg").asString().value(),
+                    Toast.LENGTH_SHORT);
+            if ((gravity & Gravity.TOP) == Gravity.TOP) {
+                toast.setGravity(Gravity.TOP | Gravity.CENTER_HORIZONTAL, 0, DoricUtils.dp2px(50));
+            } else if ((gravity & Gravity.BOTTOM) == Gravity.BOTTOM) {
+                toast.setGravity(Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL, 0, DoricUtils.dp2px(50));
+            } else {
+                toast.setGravity(Gravity.CENTER | Gravity.CENTER_HORIZONTAL, 0, 0);
+
+            }
+            toast.show();
         } catch (ArchiveException e) {
             e.printStackTrace();
         }
diff --git a/demo/index.ts b/demo/index.ts
index bd38e707..dcba746f 100644
--- a/demo/index.ts
+++ b/demo/index.ts
@@ -7,4 +7,5 @@ export default [
     'src/LayoutDemo',
     'src/EffectsDemo',
     'src/ImageDemo',
+    'src/ModalDemo',
 ]
\ No newline at end of file
diff --git a/demo/src/Counter.ts b/demo/src/Counter.ts
index d87724c6..44ea2f19 100644
--- a/demo/src/Counter.ts
+++ b/demo/src/Counter.ts
@@ -13,7 +13,7 @@ class CounterView extends ViewHolder<CountModel> {
             text({
                 textSize: 40,
                 layoutConfig: {
-                    alignment: new Gravity().center(),
+                    alignment: Gravity.Center,
                     widthSpec: LayoutSpec.WRAP_CONTENT,
                     heightSpec: LayoutSpec.WRAP_CONTENT,
                 },
@@ -27,7 +27,7 @@ class CounterView extends ViewHolder<CountModel> {
                 },
                 corners: 5,
                 layoutConfig: {
-                    alignment: new Gravity().center(),
+                    alignment: Gravity.Center,
                     widthSpec: LayoutSpec.WRAP_CONTENT,
                     heightSpec: LayoutSpec.WRAP_CONTENT,
                 },
@@ -43,9 +43,9 @@ class CounterView extends ViewHolder<CountModel> {
             it.width = 200
             it.height = 200
             it.space = 20
-            it.gravity = new Gravity().center()
+            it.gravity = Gravity.Center
             it.layoutConfig = {
-                alignment: new Gravity().center()
+                alignment: Gravity.Center
             }
             it.border = {
                 width: 1,
diff --git a/demo/src/EffectsDemo.ts b/demo/src/EffectsDemo.ts
index 355a8350..49b6ca83 100644
--- a/demo/src/EffectsDemo.ts
+++ b/demo/src/EffectsDemo.ts
@@ -1,5 +1,5 @@
 
-import { Group, Panel, Text, text, gravity, Color, Stack, LayoutSpec, vlayout, hlayout, scroller, IVLayout, IHLayout, layoutConfig } from "doric";
+import { Group, Panel, Text, text, gravity, Color, Stack, LayoutSpec, vlayout, hlayout, scroller, IVLayout, IHLayout, layoutConfig, Gravity } from "doric";
 import { colors } from "./utils";
 
 
@@ -14,7 +14,7 @@ function boxStr(str: string, idx = 0) {
     return (new Text).also(it => {
         it.width = it.height = 20
         it.text = str
-        it.textColor = Color.parse('#ffffff')
+        it.textColor = Color.WHITE
         it.bgColor = colors[idx || 0]
     })
 }
@@ -38,7 +38,7 @@ class EffectsDemo extends Panel {
                             width: 100,
                             height: 100
                         }),]).apply({
-                            gravity: gravity().center(),
+                            gravity: Gravity.Center,
                             space: 10,
                         } as IVLayout),
                     vlayout([
@@ -56,7 +56,7 @@ class EffectsDemo extends Panel {
                                 bottom: 5,
                             })
                         }),]).apply({
-                            gravity: gravity().center(),
+                            gravity: Gravity.Center,
                             space: 10,
                         } as IVLayout),
                     vlayout([
@@ -69,7 +69,7 @@ class EffectsDemo extends Panel {
                                 bottom: 10
                             })
                         }),]).apply({
-                            gravity: gravity().center(),
+                            gravity: Gravity.Center,
                             space: 10,
                         } as IVLayout),
                     vlayout([
@@ -88,7 +88,7 @@ class EffectsDemo extends Panel {
                                 bottom: 10
                             })
                         }),]).apply({
-                            gravity: gravity().center(),
+                            gravity: Gravity.Center,
                             space: 10,
                         } as IVLayout),
                 ]).apply({ space: 20 } as IHLayout),
@@ -109,7 +109,7 @@ class EffectsDemo extends Panel {
                                 bottom: 5,
                             })
                         }),]).apply({
-                            gravity: gravity().center(),
+                            gravity: Gravity.Center,
                             space: 10,
                         } as IVLayout),
                     vlayout([
@@ -132,7 +132,7 @@ class EffectsDemo extends Panel {
                                 bottom: 10
                             })
                         }),]).apply({
-                            gravity: gravity().center(),
+                            gravity: Gravity.Center,
                             space: 10,
                         } as IVLayout),
                     vlayout([
@@ -152,7 +152,7 @@ class EffectsDemo extends Panel {
                                 bottom: 10
                             })
                         }),]).apply({
-                            gravity: gravity().center(),
+                            gravity: Gravity.Center,
                             space: 10,
                         } as IVLayout),
                     vlayout([
@@ -178,7 +178,7 @@ class EffectsDemo extends Panel {
                                 bottom: 5,
                             })
                         }),]).apply({
-                            gravity: gravity().center(),
+                            gravity: Gravity.Center,
                             space: 10,
                         } as IVLayout),
                 ]).apply({ space: 20 } as IHLayout),
@@ -202,7 +202,7 @@ class EffectsDemo extends Panel {
                                 bottom: 10,
                             })
                         }),]).apply({
-                            gravity: gravity().center(),
+                            gravity: Gravity.Center,
                             space: 10,
                         } as IVLayout),
                     vlayout([
@@ -224,7 +224,7 @@ class EffectsDemo extends Panel {
                                 bottom: 10,
                             })
                         }),]).apply({
-                            gravity: gravity().center(),
+                            gravity: Gravity.Center,
                             space: 10,
                         } as IVLayout),
                     vlayout([
@@ -246,7 +246,7 @@ class EffectsDemo extends Panel {
                                 bottom: 10,
                             })
                         }),]).apply({
-                            gravity: gravity().center(),
+                            gravity: Gravity.Center,
                             space: 10,
                         } as IVLayout),
                     vlayout([
@@ -268,7 +268,7 @@ class EffectsDemo extends Panel {
                                 bottom: 10,
                             })
                         }),]).apply({
-                            gravity: gravity().center(),
+                            gravity: Gravity.Center,
                             space: 10,
                         } as IVLayout),
                 ]).apply({ space: 20 } as IHLayout),
@@ -285,7 +285,7 @@ class EffectsDemo extends Panel {
                                 bottom: 5,
                             })
                         }),]).apply({
-                            gravity: gravity().center(),
+                            gravity: Gravity.Center,
                             space: 10,
                         } as IVLayout),
                     vlayout([
@@ -302,7 +302,7 @@ class EffectsDemo extends Panel {
                                 bottom: 5,
                             })
                         }),]).apply({
-                            gravity: gravity().center(),
+                            gravity: Gravity.Center,
                             space: 10,
                         } as IVLayout),
                     vlayout([
@@ -319,7 +319,7 @@ class EffectsDemo extends Panel {
                                 bottom: 5,
                             })
                         }),]).apply({
-                            gravity: gravity().center(),
+                            gravity: Gravity.Center,
                             space: 10,
                         } as IVLayout),
                     vlayout([
@@ -336,7 +336,7 @@ class EffectsDemo extends Panel {
                                 bottom: 5,
                             })
                         }),]).apply({
-                            gravity: gravity().center(),
+                            gravity: Gravity.Center,
                             space: 10,
                         } as IVLayout),
                     vlayout([
@@ -353,7 +353,7 @@ class EffectsDemo extends Panel {
                                 bottom: 5,
                             })
                         }),]).apply({
-                            gravity: gravity().center(),
+                            gravity: Gravity.Center,
                             space: 10,
                         } as IVLayout),
                 ]).apply({ space: 20 } as IHLayout),
diff --git a/demo/src/ModalDemo.ts b/demo/src/ModalDemo.ts
new file mode 100644
index 00000000..2ffb536f
--- /dev/null
+++ b/demo/src/ModalDemo.ts
@@ -0,0 +1,62 @@
+import { Group, Panel, List, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, Text, scroller, layoutConfig, image, IView, IVLayout, ScaleType, IText, modal } from "doric";
+import { colors, label } from "./utils";
+
+@Entry
+class ModalDemo extends Panel {
+    build(rootView: Group): void {
+        scroller(vlayout([
+            text({
+                text: "Modal",
+                layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST),
+                textSize: 30,
+                textColor: Color.WHITE,
+                bgColor: colors[1],
+                textAlignment: Gravity.Center,
+                height: 50,
+            }),
+            label('toast on bottom'),
+            label('Click me').apply({
+                width: 200,
+                height: 50,
+                bgColor: colors[0],
+                textSize: 30,
+                textColor: Color.WHITE,
+                layoutConfig: layoutConfig().exactly(),
+                onClick: () => {
+                    modal(context).toast('This is a toast.')
+                }
+            } as IText),
+            label('toast on top'),
+            label('Click me').apply({
+                width: 200,
+                height: 50,
+                bgColor: colors[0],
+                textSize: 30,
+                textColor: Color.WHITE,
+                layoutConfig: layoutConfig().exactly(),
+                onClick: () => {
+                    modal(context).toast('This is a toast.', Gravity.Top)
+                }
+            } as IText),
+
+            label('toast on center'),
+            label('Click me').apply({
+                width: 200,
+                height: 50,
+                bgColor: colors[0],
+                textSize: 30,
+                textColor: Color.WHITE,
+                layoutConfig: layoutConfig().exactly(),
+                onClick: () => {
+                    modal(context).toast('This is a toast.', Gravity.Center)
+                }
+            } as IText),
+        ]).apply({
+            layoutConfig: layoutConfig().atmost().h(LayoutSpec.WRAP_CONTENT),
+            gravity: Gravity.Center,
+            space: 10,
+        } as IVLayout)).apply({
+            layoutConfig: layoutConfig().atmost(),
+        }).in(rootView)
+    }
+}
\ No newline at end of file
diff --git a/iOS/Pod/Classes/Plugin/DoricModalPlugin.m b/iOS/Pod/Classes/Plugin/DoricModalPlugin.m
index 8045f6ae..b13f2734 100644
--- a/iOS/Pod/Classes/Plugin/DoricModalPlugin.m
+++ b/iOS/Pod/Classes/Plugin/DoricModalPlugin.m
@@ -20,16 +20,19 @@
 //  Created by pengfei.zhou on 2019/7/29.
 //
 
+#import <Doric/Doric.h>
 #import "DoricModalPlugin.h"
-#import "DoricRegistry.h"
-
+#import "DoricUtil.h"
 
 @implementation DoricModalPlugin
 
-- (void)toast:(NSString *)message withPromise:(DoricPromise *)promise {
+- (void)toast:(NSDictionary *)dic withPromise:(DoricPromise *)promise {
     dispatch_async(dispatch_get_main_queue(), ^{
-        NSLog(@"toast:%@", message);
-        [promise resolve:@"Resolved"];
+        __block DoricGravity gravity = BOTTOM;
+        [dic[@"gravity"] also:^(NSNumber *it) {
+            gravity = (DoricGravity) [it integerValue];
+        }];
+        showToast(dic[@"msg"], gravity);
     });
 }
 
diff --git a/iOS/Pod/Classes/Util/DoricUtil.h b/iOS/Pod/Classes/Util/DoricUtil.h
index 3fc8f087..8931970d 100644
--- a/iOS/Pod/Classes/Util/DoricUtil.h
+++ b/iOS/Pod/Classes/Util/DoricUtil.h
@@ -21,6 +21,7 @@
 //
 
 #import <Foundation/Foundation.h>
+#import "DoricLayouts.h"
 
 void DoricLog(NSString *_Nonnull format, ...);
 
@@ -35,3 +36,5 @@ NSBundle *_Nonnull DoricBundle(void);
 #ifndef DC_UNLOCK
 #define DC_UNLOCK(lock) dispatch_semaphore_signal(lock);
 #endif
+
+void showToast(NSString *_Nonnull text, DoricGravity gravity);
\ No newline at end of file
diff --git a/iOS/Pod/Classes/Util/DoricUtil.m b/iOS/Pod/Classes/Util/DoricUtil.m
index e2b21f65..5d6f5cc2 100644
--- a/iOS/Pod/Classes/Util/DoricUtil.m
+++ b/iOS/Pod/Classes/Util/DoricUtil.m
@@ -22,6 +22,7 @@
 
 #import "DoricUtil.h"
 #import "DoricContext.h"
+#import "UIView+Doric.h"
 
 void DoricLog(NSString *_Nonnull format, ...) {
     va_list args;
@@ -45,3 +46,32 @@ void DoricLog(NSString *_Nonnull format, ...) {
     NSURL *url = [bundle URLForResource:@"Doric" withExtension:@"bundle"];
     return [NSBundle bundleWithURL:url];
 }
+
+
+void showToast(NSString *text, DoricGravity gravity) {
+    UIView *superView = [UIApplication sharedApplication].windows.lastObject;
+    UILabel *label = [[UILabel alloc] init];
+    label.font = [UIFont systemFontOfSize:20.f];
+    label.text = text;
+    label.textAlignment = NSTextAlignmentCenter;
+    label.layer.masksToBounds = YES;
+    label.backgroundColor = [UIColor grayColor];
+    label.textColor = [UIColor whiteColor];
+    [label sizeToFit];
+    label.width += 30;
+    label.height += 10;
+    label.layer.cornerRadius = label.height / 2;
+    label.centerX = superView.width / 2;
+    if ((gravity & BOTTOM) == BOTTOM) {
+        label.bottom = superView.height - 20;
+    } else if ((gravity & TOP) == TOP) {
+        label.top = 108;
+    } else {
+        label.centerY = (superView.height - 88) / 2;
+    }
+
+    [superView addSubview:label];
+    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t) (2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
+        [label removeFromSuperview];
+    });
+}
\ No newline at end of file
diff --git a/js-framework/index.ts b/js-framework/index.ts
index 02e3c137..e05cc44b 100644
--- a/js-framework/index.ts
+++ b/js-framework/index.ts
@@ -28,3 +28,4 @@ export * from './src/util/gravity'
 export * from './src/util/candies'
 export * from './src/vm/mvvm'
 export * from './src/runtime/global'
+export * from './src/util/modal'
diff --git a/js-framework/src/runtime/global.ts b/js-framework/src/runtime/global.ts
index b03e9c8b..ab78396a 100644
--- a/js-framework/src/runtime/global.ts
+++ b/js-framework/src/runtime/global.ts
@@ -15,8 +15,10 @@
  */
 export * from 'reflect-metadata'
 
+export type BridgeContext = { [index: string]: { [index: string]: (args?: any) => Promise<any> } }
+
 declare global {
-    const context: { [index: string]: { [index: string]: (args?: any) => Promise<any> } };
+    const context: BridgeContext
     function Entry(constructor: { new(...args: any[]): {} }): any
 }
 export { }
\ No newline at end of file
diff --git a/js-framework/src/util/gravity.ts b/js-framework/src/util/gravity.ts
index e044c150..bc7311e8 100644
--- a/js-framework/src/util/gravity.ts
+++ b/js-framework/src/util/gravity.ts
@@ -37,45 +37,65 @@ export class Gravity implements Modeling {
     val = 0
 
     left() {
-        this.val |= LEFT
-        return this
+        const val = this.val | LEFT
+        const ret = new Gravity
+        ret.val = val
+        return ret
     }
 
     right() {
-        this.val |= RIGHT
-        return this
+        const val = this.val | RIGHT
+        const ret = new Gravity
+        ret.val = val
+        return ret
     }
 
     top() {
-        this.val |= TOP
-        return this
+        const val = this.val | TOP
+        const ret = new Gravity
+        ret.val = val
+        return ret
     }
 
     bottom() {
-        this.val |= BOTTOM
-        return this
+        const val = this.val | BOTTOM
+        const ret = new Gravity
+        ret.val = val
+        return ret
     }
 
     center() {
-        this.val |= CENTER
-        return this
+        const val = this.val | CENTER
+        const ret = new Gravity
+        ret.val = val
+        return ret
     }
 
     centerX() {
-        this.val |= CENTER_X
-        return this
+        const val = this.val | CENTER_X
+        const ret = new Gravity
+        ret.val = val
+        return ret
     }
 
     centerY() {
-        this.val |= CENTER_Y
-        return this
+        const val = this.val | CENTER_Y
+        const ret = new Gravity
+        ret.val = val
+        return ret
     }
 
 
     toModel() {
         return this.val
     }
+    private static origin = new Gravity
 
+    static Center = Gravity.origin.center()
+    static Left = Gravity.origin.left()
+    static Right = Gravity.origin.right()
+    static Top = Gravity.origin.top()
+    static Bottom = Gravity.origin.bottom()
 }
 export function gravity() {
     return new Gravity
diff --git a/js-framework/src/util/modal.ts b/js-framework/src/util/modal.ts
new file mode 100644
index 00000000..dd44af54
--- /dev/null
+++ b/js-framework/src/util/modal.ts
@@ -0,0 +1,15 @@
+import { BridgeContext } from "../runtime/global";
+import { Gravity } from "./gravity";
+
+
+
+export function modal(context: BridgeContext) {
+    return {
+        toast: (msg: string, gravity: Gravity = Gravity.Bottom) => {
+            context.modal.toast({
+                msg,
+                gravity: gravity.toModel(),
+            })
+        },
+    }
+}
\ No newline at end of file