1

simple-demo/send_memos.html

@@ -11,13 +11,27 @@
         #editor {
             height: 150px;
         }
+        #mask {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
         #model {
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
+            background-color: white;
             width: 50%;
-            height: 50%;
+            padding: 20px;
+            border-radius: 5px;
         }
     </style>
 </head>
@@ -47,13 +61,16 @@
     </div>
 </div>
 
-<div id="model" style="display: none">
-    <div id="editorModel"></div>
-    <br>
-    <!--    取消 和 确认按钮-->
-    <button onclick="hideModel()" style="margin-right: 50px">取消</button>
-    <button onclick="updateById()">确认</button>
+<div id="mask" style="display: none">
+    <div id="model">
+        <div id="editorModel"></div>
+        <br>
+        <!--    取消 和 确认按钮-->
+        <button onclick="hideModel()" style="margin-right: 50px">取消</button>
+        <button onclick="updateById()">确认</button>
+    </div>
 </div>
+
 <!-- 引入Quill库 -->
 <script src="./js/cdn.quilljs.com_1.3.6_quill.js"></script>
 <!--异步请求示例：requestUtil.sync('https://jsonplaceholder.typicode.com/posts/1', 'post', data, headers) .then(data => console.log(data))-->
@@ -99,14 +116,14 @@
         });
     });
     function showModel() {
-        document.getElementById('model').style.display = 'block';
+        document.getElementById('mask').style.display = 'block';
         // 隐藏编辑器
-        document.getElementById('all').style.display = 'none';
+        // document.getElementById('all').style.display = 'none';
     }
     function hideModel() {
-        document.getElementById('model').style.display = 'none';
+        document.getElementById('mask').style.display = 'none';
         // 显示编辑器
-        document.getElementById('all').style.display = 'block';
+        // document.getElementById('all').style.display = 'block';
     }
 
 
@@ -133,7 +150,7 @@
 
     // 如果处于编辑状态，则执行esc取消
     window.onkeydown = function (event) {
-        if (event.keyCode === 27 && document.getElementById('model').style.display === 'block') {
+        if (event.keyCode === 27 && document.getElementById('mask').style.display === 'block') {
             hideModel();
         }
         // 如果是meta + enter 则保存