|
|
@@ -100,6 +100,37 @@
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+/* 锁定背景页面滚动，防止弹窗出现时背景页还能滚动 */
|
|
|
+body.lock-scroll {
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+/* 设置对话框背景遮罩 */
|
|
|
+dialog::backdrop {
|
|
|
+ background: rgba(0, 0, 0, 0.8);
|
|
|
+}
|
|
|
+
|
|
|
+/* 确保放大后的图片不会超出视口 */
|
|
|
+#dialog-img {
|
|
|
+ max-width: 90vw;
|
|
|
+ max-height: 90vh;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+/* 关闭按钮样式 */
|
|
|
+#close-btn {
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ right: 15px;
|
|
|
+ font-size: 24px;
|
|
|
+ background: none;
|
|
|
+ border: none;
|
|
|
+ color: white;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
</style>
|
|
|
<body>
|
|
|
<div class="warp">
|
|
|
@@ -148,7 +179,7 @@
|
|
|
|
|
|
{else}
|
|
|
<div class="image-card">
|
|
|
- <img src="{$img['url']}" alt="uploaded image">
|
|
|
+ <img src="{$img['url']}" alt="uploaded image" onclick="showImg(this)">
|
|
|
<input type="hidden" name="img[]" value="{$img['url']}" />
|
|
|
<button class="delete-btn" aria-label="删除文件" onclick="del(this)">✕</button>
|
|
|
</div>
|
|
|
@@ -165,7 +196,11 @@
|
|
|
<input type="hidden" name="id" value="{$goods['id']}" />
|
|
|
<div class="button"><font class="datasave">提 交</font> <font class="fh">关 闭</font></div>
|
|
|
</div>
|
|
|
-
|
|
|
+<!-- 对话框元素，默认是隐藏的 -->
|
|
|
+<dialog id="image-dialog" role="dialog" aria-modal="true">
|
|
|
+<img id="dialog-img" src="" alt="">
|
|
|
+<button id="close-btn">×</button>
|
|
|
+</dialog>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
@@ -236,6 +271,9 @@ function addImageToGallery(imageUrl, fileName = '',fileType='') {
|
|
|
img = document.createElement('img');
|
|
|
img.src = imageUrl;
|
|
|
img.alt = fileName || 'uploaded image';
|
|
|
+ img.onclick = function() {
|
|
|
+ showImg(this); // this 指向 img
|
|
|
+ };
|
|
|
} else {
|
|
|
img = document.createElement('video');
|
|
|
img.src = imageUrl;
|
|
|
@@ -373,6 +411,44 @@ function transf_img_url(url){
|
|
|
let final_url = url_arr.join('/');
|
|
|
return final_url;
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+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 showImg(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/aliyun-oss-sdk-6.20.0.min.js"></script>
|
|
|
<script type="text/javascript" src="{$theme}js/ajaxupload.3.5.js"></script>
|
