1

template/erp/scanimgs.html

@@ -34,10 +34,15 @@
 </table>
 <div class="bomf"></div>
 </div>
+<!-- 对话框元素，默认是隐藏的 -->
+<dialog id="image-dialog" role="dialog" aria-modal="true">
+<img id="dialog-img" src="" alt="">
+<button id="close-btn">×</button>
+</dialog>
+        
 <script>
 var dataurl = "/scanimgs/data/";
 var editurl = "/scanimgs/detail/";
-var editdj = 1;
 var editt = "详情";
 var customon = 1;
 function custom(){
@@ -51,6 +56,43 @@ function custom(){
     });
 }
 
+
+const dialog = document.getElementById('image-dialog');
+const dialogImg = document.getElementById('dialog-img');
+const closeBtn = document.getElementById('close-btn');
+
+// 点击图片，打开对话框
+// img.addEventListener('click', () => {
+//   console.log(img)
+//   dialogImg.src = img.data('ulr'); // 将缩略图的src赋给对话框中的图片
+//   dialog.showModal();      // 显示对话框
+// });
+function showBigImg(that) {
+    dialogImg.src = $(that).attr('src'); // 将缩略图的src赋给对话框中的图片
+    dialog.showModal();      // 显示对话框
+}
+
+
+// 点击关闭按钮，关闭对话框
+closeBtn.addEventListener('click', () => {
+  dialog.close();
+});
+
+// 点击对话框的遮罩层（非图片区域），也可以关闭
+dialog.addEventListener('click', (e) => {
+  if (e.target === dialog) {
+    dialog.close();
+  }
+});
+
+// 监听对话框的打开和关闭事件，用于锁定和恢复背景页滚动
+dialog.addEventListener('show', () => {
+  document.body.classList.add('lock-scroll');
+});
+dialog.addEventListener('close', () => {
+  document.body.classList.remove('lock-scroll');
+});
+
 </script>
 <script type="text/javascript" src="{$theme}js/laydate.js"></script>
 <script type="text/javascript" src="{$theme}js/excel/xlxs.js" ></script>