|
@@ -1,6 +1,34 @@
|
|
|
{Template header}
|
|
{Template header}
|
|
|
<style>
|
|
<style>
|
|
|
-
|
|
|
|
|
|
|
+ /* 锁定背景页面滚动，防止弹窗出现时背景页还能滚动 */
|
|
|
|
|
+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>
|
|
</style>
|
|
|
<body>
|
|
<body>
|
|
|
<div class="warp">
|
|
<div class="warp">
|
|
@@ -70,10 +98,65 @@
|
|
|
</table>
|
|
</table>
|
|
|
<div class="bomf"></div>
|
|
<div class="bomf"></div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+<!-- 对话框元素，默认是隐藏的 -->
|
|
|
|
|
+<dialog id="image-dialog" role="dialog" aria-modal="true">
|
|
|
|
|
+<img id="dialog-img" src="" alt="">
|
|
|
|
|
+<button id="close-btn">×</button>
|
|
|
|
|
+</dialog>
|
|
|
|
|
+
|
|
|
<script>
|
|
<script>
|
|
|
var dataurl = "/goodimglibrary";
|
|
var dataurl = "/goodimglibrary";
|
|
|
var editurl = "/goodimglibrary/edit/";
|
|
var editurl = "/goodimglibrary/edit/";
|
|
|
var editdj = 1;
|
|
var editdj = 1;
|
|
|
var editt = " 货品图片 - 编辑";
|
|
var editt = " 货品图片 - 编辑";
|
|
|
|
|
+
|
|
|
|
|
+var customon = 1;
|
|
|
|
|
+function custom(){
|
|
|
|
|
+$(".data tr").each(function() {
|
|
|
|
|
+$(this).find('td:eq(0)').css("width","1%");
|
|
|
|
|
+$(this).find('td:eq(1)').css("width","16%");
|
|
|
|
|
+$(this).find('td:eq(2)').css("width","16%");
|
|
|
|
|
+$(this).find('td:eq(3)').css("width","16%");
|
|
|
|
|
+$(this).find('td:eq(4)').css("width","10%");
|
|
|
|
|
+$(this).find('td:eq(5)').css("width","40%");
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+});}
|
|
|
|
|
+
|
|
|
|
|
+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>
|
|
|
{Template footer}
|
|
{Template footer}
|
