diff --git a/UI/JSDialog/README_zh.md b/UI/JSDialog/README_zh.md
new file mode 100644
index 0000000000000000000000000000000000000000..e5d68c556615e091062077b7adee6ec51871e9ec
--- /dev/null
+++ b/UI/JSDialog/README_zh.md
@@ -0,0 +1,17 @@
+# JS页面弹窗
+
+
+
+### 简介
+
+JS中支持用户自定义弹窗，<dialog/>组件作为容器组件，用户可以自定义弹窗的样式和布局。本示例完成了添加和删除联系人功能，在添加和删除时使用自定义弹窗来实现。
+
+### 使用说明
+
+1、点击**添加联系人**会弹出添加联系人弹窗，点击**确定**会添加该联系人，点击**取消**则取消添加。
+
+2、在添加的联系人列表中，点击**删除**，会弹出确认弹窗，点击**删除**则会将此联系人从列表中删除，点击**取消**则取消删除操作。
+
+### 约束与限制
+
+本示例支持标准系统上运行。
diff --git a/UI/JSDialog/build.gradle b/UI/JSDialog/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..5241ed1fdfd558b276e5bf1471cf37f96e7f7d93
--- /dev/null
+++ b/UI/JSDialog/build.gradle
@@ -0,0 +1,36 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+apply plugin: 'com.huawei.ohos.app'
+
+// For instructions on signature configuration, see https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_debug_device-0000001053822404#section1112183053510
+ohos {
+    compileSdkVersion 6
+    defaultConfig {
+        compatibleSdkVersion 6
+    }
+}
+
+buildscript {
+    repositories {
+        maven {
+            url 'https://repo.huaweicloud.com/repository/maven/'
+        }
+        maven {
+            url 'https://developer.huawei.com/repo/'
+        }
+    }
+    dependencies {
+        classpath 'com.huawei.ohos:hap:2.4.5.0'
+        classpath 'com.huawei.ohos:decctest:1.2.4.1'
+    }
+}
+
+allprojects {
+    repositories {
+        maven {
+            url 'https://repo.huaweicloud.com/repository/maven/'
+        }
+        maven {
+            url 'https://developer.huawei.com/repo/'
+        }
+    }
+}
diff --git a/UI/JSDialog/entry/build.gradle b/UI/JSDialog/entry/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..8043324df3c5c95cf5cbf23cdbed124b6840a69d
--- /dev/null
+++ b/UI/JSDialog/entry/build.gradle
@@ -0,0 +1,23 @@
+apply plugin: 'com.huawei.ohos.hap'
+// For instructions on signature configuration, see https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_debug_device-0000001053822404#section1112183053510
+ohos {
+    compileSdkVersion 6
+    defaultConfig {
+        compatibleSdkVersion 6
+    }
+    buildTypes {
+        release {
+            proguardOpt {
+                proguardEnabled false
+                rulesFiles 'proguard-rules.pro'
+            }
+        }
+    }
+    
+    supportSystem "standard"
+}
+
+dependencies {
+    implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
+    testImplementation 'junit:junit:4.13'
+}
diff --git a/UI/JSDialog/entry/src/main/config.json b/UI/JSDialog/entry/src/main/config.json
new file mode 100644
index 0000000000000000000000000000000000000000..ea54815b8a7f69d958605f68edf3efeef343c661
--- /dev/null
+++ b/UI/JSDialog/entry/src/main/config.json
@@ -0,0 +1,59 @@
+{
+  "app": {
+    "bundleName": "ohos.samples.jsdialog",
+    "vendor": "samples",
+    "version": {
+      "code": 1000000,
+      "name": "1.0.0"
+    }
+  },
+  "deviceConfig": {},
+  "module": {
+    "package": "ohos.samples.jsdialog",
+    "name": ".MyApplication",
+    "mainAbility": ".MainAbility",
+    "deviceType": [
+      "phone"
+    ],
+    "distro": {
+      "deliveryWithInstall": true,
+      "moduleName": "entry",
+      "moduleType": "entry",
+      "installationFree": false
+    },
+    "abilities": [
+      {
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "action.system.home"
+            ]
+          }
+        ],
+        "orientation": "unspecified",
+        "name": ".MainAbility",
+        "icon": "$media:icon",
+        "description": "$string:mainability_description",
+        "formsEnabled": false,
+        "label": "$string:JSDialog",
+        "type": "page",
+        "launchType": "standard"
+      }
+    ],
+    "js": [
+      {
+        "pages": [
+          "pages/index/index"
+        ],
+        "name": "default",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": false
+        }
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/UI/JSDialog/entry/src/main/js/default/app.js b/UI/JSDialog/entry/src/main/js/default/app.js
new file mode 100644
index 0000000000000000000000000000000000000000..58d12b7b501fbf46db906a86187aaf18dfb1f677
--- /dev/null
+++ b/UI/JSDialog/entry/src/main/js/default/app.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+    onCreate() {
+        console.info("Application onCreate");
+    },
+    onDestroy() {
+        console.info("Application onDestroy");
+    }
+};
diff --git a/UI/JSDialog/entry/src/main/js/default/i18n/en-US.json b/UI/JSDialog/entry/src/main/js/default/i18n/en-US.json
new file mode 100644
index 0000000000000000000000000000000000000000..a1a782ba2d57bda27152b09ab73b32d8d99350b4
--- /dev/null
+++ b/UI/JSDialog/entry/src/main/js/default/i18n/en-US.json
@@ -0,0 +1,16 @@
+{
+  "strings": {
+    "tips": "No Contacts,Click the button 'Add contact' to add.",
+    "add": "Add contact",
+    "title": "Contact",
+    "name": "Name:",
+    "phone": "Phone:",
+    "sure": "Sure",
+    "cancel": "Cancel",
+    "delete": "Delete",
+    "delete_tips": "Delete this contact?",
+    "contact": "contact"
+  },
+  "Files": {
+  }
+}
\ No newline at end of file
diff --git a/UI/JSDialog/entry/src/main/js/default/i18n/zh-CN.json b/UI/JSDialog/entry/src/main/js/default/i18n/zh-CN.json
new file mode 100644
index 0000000000000000000000000000000000000000..e1852f41974f90504e80d66f4cc6600db0a1b3ce
--- /dev/null
+++ b/UI/JSDialog/entry/src/main/js/default/i18n/zh-CN.json
@@ -0,0 +1,14 @@
+{
+  "strings": {
+    "tips": "没有联系人，点击\"添加联系人\"添加.",
+    "add": "添加联系人",
+    "title": "联系人",
+    "name": "姓名:",
+    "phone": "电话:",
+    "sure": "确定",
+    "cancel": "取消",
+    "delete": "删除",
+    "delete_tips": "删除此联系人?",
+    "contact": "联系人"
+  }
+}
\ No newline at end of file
diff --git a/UI/JSDialog/entry/src/main/js/default/pages/index/index.css b/UI/JSDialog/entry/src/main/js/default/pages/index/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..322728695981a2bcd47a704f3a716c12536b8ebe
--- /dev/null
+++ b/UI/JSDialog/entry/src/main/js/default/pages/index/index.css
@@ -0,0 +1,172 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.title-bar {
+    width: 100%;
+    height: 110px;
+    flex-direction: row;
+    background-color: dodgerblue;
+}
+
+.title {
+    width: 50%;
+    font-size: 55px;
+    text-align: left;
+    margin: 10px;
+}
+
+.btn {
+    height: 100px;
+    font-size: 40px;
+    background-color: dodgerblue;
+    color: white;
+    width: 50%;
+    text-align: right;
+    margin: 10px;
+}
+
+.content-container {
+    width: 100%;
+    justify-content: center;
+}
+
+.tips {
+    font-size: 40px;
+    width: 100%;
+    text-color: gray;
+    text-align: center;
+    margin-top: 100px;
+}
+
+.list {
+    width: 100%;
+    divider-color: lightgray;
+}
+
+.todo-item {
+    width: 100%;
+    margin-top: 2px;
+    flex-direction: row;
+    align-items: center;
+}
+
+.item-container {
+    width: 80%;
+    flex-direction: column;
+    align-items: center;
+}
+
+.item-row {
+    margin-top: 2px;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: flex-start;
+    width: 100%;
+}
+
+.item-text {
+    font-size: 50px;
+    text-align: left;
+    margin: 10px;
+}
+
+.item-btn {
+    width: 30%;
+    font-size: 50px;
+    text-align: right;
+    color: red;
+    background-color: white;
+}
+
+.dialog-delete {
+    width: 90%;
+    height: 300px;
+}
+
+.dialog-text-delete {
+    font-size: 50px;
+    text-align: center;
+    width: 100%;
+}
+
+.dialog {
+    width: 90%;
+    height: 430px;
+}
+
+.dialog-container {
+    width: 90%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.text-container {
+    width: 100%;
+    flex-direction: row;
+    align-items: flex-start;
+    margin-top: 15px;
+}
+
+.dialog-text {
+    font-size: 50px;
+    text-align: left;
+    margin: 10px;
+    width: 30%;
+}
+
+.dialog-edit {
+    width: 75%;
+    font-size: 45px;
+    height: 90px;
+    text-color: black;
+    text-align: left;
+    border-width: 1px;
+    border-color: black;
+    border-style: solid;
+}
+
+.dialog-btn {
+    width: 50%;
+    height: 90px;
+    font-size: 40px;
+    margin: 10px;
+    background-color: white;
+    color: blue;
+}
+
+.dialog-btn-cancel {
+    width: 50%;
+    height: 90px;
+    font-size: 40px;
+    color: red;
+    margin: 10px;
+    background-color: white;
+}
+
+.line {
+    width: 2px;
+    height: 90px;
+    margin: 10px;
+    background-color: gray;
+}
diff --git a/UI/JSDialog/entry/src/main/js/default/pages/index/index.hml b/UI/JSDialog/entry/src/main/js/default/pages/index/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..db0e3be8a004d626c835b94d3fa58a9f5730aff4
--- /dev/null
+++ b/UI/JSDialog/entry/src/main/js/default/pages/index/index.hml
@@ -0,0 +1,72 @@
+<!--
+ Copyright (c) 2021 Huawei Device Co., Ltd.
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ -->
+
+<div class="container">
+    <div class="title-bar">
+        <text class="title">{{ $t('strings.title') }}</text>
+        <text class="btn" onclick="onclick">{{ $t('strings.add') }}</text>
+    </div>
+    <stack class="content-container">
+        <list class="list" divider="true">
+            <list-item clickeffect="false" for="{{ listItem }}" class="todo-item">
+                <div class="item-container">
+                    <div class="item-row">
+                        <text class="item-text">{{ $t('strings.name') }}</text>
+                        <text class="item-text">{{ $item.name }}</text>
+                    </div>
+                    <div class="item-row">
+                        <text class="item-text">{{ $t('strings.phone') }}</text>
+                        <text class="item-text">{{ $item.phone }}</text>
+                    </div>
+                </div>
+                <input class="item-btn" type="button" onclick="showDeleteDialog($item)">{{ $t('strings.delete') }}
+                </input>
+            </list-item>
+        </list>
+        <text class="tips" show="{{ showTips }}">
+            {{ $t('strings.tips') }}
+        </text>
+    </stack>
+    <dialog id="deleteDialog" class="dialog-delete" oncancel="cancelDeleteDialog">
+        <div class="dialog-container">
+            <text class="dialog-text-delete">{{ $t('strings.delete_tips') }}</text>
+            <div class="text-container">
+                <input class="dialog-btn-cancel" type="button" value="{{ $t('strings.delete') }}"
+                       onclick="onDeleteSure"></input>
+                <text class="line"></text>
+                <input class="dialog-btn" type="button" value="{{ $t('strings.cancel') }}"
+                       onclick="cancelDeleteDialog"></input>
+            </div>
+        </div>
+    </dialog>
+    <dialog id="showDialog" class="dialog" oncancel="cancelDialog">
+        <div class="dialog-container">
+            <div class="dialog-text-container">
+                <text class="dialog-text">{{ $t('strings.name') }}</text>
+                <textarea class="dialog-edit" value="{{ name }}">{{ name }}</textarea>
+            </div>
+            <div class="text-container">
+                <text class="dialog-text">{{ $t('strings.phone') }}</text>
+                <textarea class="dialog-edit" value="{{ phone }}">{{ phone }}</textarea>
+            </div>
+            <div class="text-container">
+                <input class="dialog-btn" type="button" value="{{ $t('strings.sure') }}" onclick="onConfirm"></input>
+                <text class="line"></text>
+                <input class="dialog-btn-cancel" type="button" value="{{ $t('strings.cancel') }}"
+                       onclick="cancelDialog"></input>
+            </div>
+        </div>
+    </dialog>
+</div>
diff --git a/UI/JSDialog/entry/src/main/js/default/pages/index/index.js b/UI/JSDialog/entry/src/main/js/default/pages/index/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..8cc68a2049f483bf50714646ac2a04df8efc2f91
--- /dev/null
+++ b/UI/JSDialog/entry/src/main/js/default/pages/index/index.js
@@ -0,0 +1,62 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+    data: {
+        listItem: [],
+        showTips: true,
+        name: '',
+        phone: '17700000000',
+        num: 0,
+        deleteItem: null
+    },
+    onclick: function () {
+        this.num += 1
+        this.name = this.$t('strings.contact') + this.num
+        this.$element('showDialog').show();
+    },
+    showDeleteDialog: function (object) {
+        console.info('delete:' + JSON.stringify(object))
+        this.deleteItem = object
+        this.$element('deleteDialog').show();
+    },
+    cancelDeleteDialog: function () {
+        this.deleteItem = null
+        this.$element('deleteDialog').close();
+    },
+    cancelDialog: function () {
+        this.$element('showDialog').close();
+    },
+    onConfirm: function () {
+        this.listItem.push({
+            'name': this.name, 'phone': this.phone
+        })
+        this.showTips = false
+        this.$element('showDialog').close();
+    },
+    onDeleteSure: function () {
+        var index = this.listItem.indexOf(this.deleteItem)
+        console.info('index=' + index)
+        this.listItem.splice(index, 1)
+        if (this.listItem.length === 0) {
+            this.num = 0
+            this.showTips = true
+        }
+        this.$element('deleteDialog').close();
+    }
+}
+
+
+
diff --git a/UI/JSDialog/entry/src/main/resources/base/element/string.json b/UI/JSDialog/entry/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..b52864d8c5737f7d1a9f6dffe89ff36232f46cea
--- /dev/null
+++ b/UI/JSDialog/entry/src/main/resources/base/element/string.json
@@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "JSDialog",
+      "value": "JSDialog"
+    },
+    {
+      "name": "mainability_description",
+      "value": "JS_Empty Ability"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/UI/JSDialog/entry/src/main/resources/base/media/icon.png b/UI/JSDialog/entry/src/main/resources/base/media/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce307a8827bd75456441ceb57d530e4c8d45d36c
Binary files /dev/null and b/UI/JSDialog/entry/src/main/resources/base/media/icon.png differ
diff --git a/UI/JSDialog/screenshots/devices/add.png b/UI/JSDialog/screenshots/devices/add.png
new file mode 100644
index 0000000000000000000000000000000000000000..be161fcd4cf8e86278c14c52c63a3e73a4803393
Binary files /dev/null and b/UI/JSDialog/screenshots/devices/add.png differ
diff --git a/UI/JSDialog/screenshots/devices/delete.png b/UI/JSDialog/screenshots/devices/delete.png
new file mode 100644
index 0000000000000000000000000000000000000000..bf450a1adc88880efa219b4dd79f734be68cea7c
Binary files /dev/null and b/UI/JSDialog/screenshots/devices/delete.png differ
diff --git a/UI/JSDialog/settings.gradle b/UI/JSDialog/settings.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..4773db73233a570c2d0c01a22e75321acfbf7a07
--- /dev/null
+++ b/UI/JSDialog/settings.gradle
@@ -0,0 +1 @@
+include ':entry'