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..5a86d909 100644
--- a/Android/doric/src/main/java/pub/doric/plugin/ModalPlugin.java
+++ b/Android/doric/src/main/java/pub/doric/plugin/ModalPlugin.java
@@ -25,6 +25,7 @@ import pub.doric.utils.ThreadMode;
 
 import com.github.pengfeizhou.jscore.ArchiveException;
 import com.github.pengfeizhou.jscore.JSDecoder;
+import com.github.pengfeizhou.jscore.JSObject;
 
 /**
  * @Description: Doric
@@ -41,7 +42,10 @@ 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();
+            Toast.makeText(getDoricContext().getContext(),
+                    jsObject.getProperty("msg").asString().value(),
+                    Toast.LENGTH_SHORT).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/ModalDemo.ts b/demo/src/ModalDemo.ts
new file mode 100644
index 00000000..3597a419
--- /dev/null
+++ b/demo/src/ModalDemo.ts
@@ -0,0 +1,37 @@
+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'),
+            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),
+        ]).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..c92fd70a 100644
--- a/iOS/Pod/Classes/Plugin/DoricModalPlugin.m
+++ b/iOS/Pod/Classes/Plugin/DoricModalPlugin.m
@@ -21,15 +21,13 @@
 //
 
 #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"];
+        showToast(dic[@"msg"]);
     });
 }
 
diff --git a/iOS/Pod/Classes/Util/DoricUtil.h b/iOS/Pod/Classes/Util/DoricUtil.h
index 3fc8f087..408367c7 100644
--- a/iOS/Pod/Classes/Util/DoricUtil.h
+++ b/iOS/Pod/Classes/Util/DoricUtil.h
@@ -35,3 +35,8 @@ NSBundle *_Nonnull DoricBundle(void);
 #ifndef DC_UNLOCK
 #define DC_UNLOCK(lock) dispatch_semaphore_signal(lock);
 #endif
+
+void showToastInView(NSString *_Nonnull text, UIView *_Nonnull superView);
+
+
+void showToast(NSString *_Nonnull text);
\ No newline at end of file
diff --git a/iOS/Pod/Classes/Util/DoricUtil.m b/iOS/Pod/Classes/Util/DoricUtil.m
index e2b21f65..450a6212 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 showToastInView(NSString *text, UIView *superView) {
+    if (!superView) {
+        return;
+    }
+    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.bottom = superView.height - 20;
+    label.centerX = superView.width / 2;
+    [superView addSubview:label];
+    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t) (2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
+        [label removeFromSuperview];
+    });
+}
+
+
+void showToast(NSString *text) {
+    showToastInView(text, [UIApplication sharedApplication].windows.lastObject);
+}
\ 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/modal.ts b/js-framework/src/util/modal.ts
new file mode 100644
index 00000000..73fabf51
--- /dev/null
+++ b/js-framework/src/util/modal.ts
@@ -0,0 +1,11 @@
+import { BridgeContext } from "../runtime/global";
+
+
+
+export function modal(context: BridgeContext) {
+    return {
+        toast: (msg: string) => {
+            context.modal.toast({ msg })
+        },
+    }
+}
\ No newline at end of file