|
|
@@ -1,4 +1,36 @@
|
|
|
{Template header}
|
|
|
+<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>
|
|
|
+
|
|
|
<body>
|
|
|
<div class="warp">
|
|
|
<div class="title winnone">订单颜色参照 - 查看</div>
|
|
|
@@ -61,4 +93,50 @@
|
|
|
<input type="hidden" name="id" value="{$colour['id']}" />
|
|
|
<div class="button"><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>
|
|
|
+const img = document.querySelector('.zoomable');
|
|
|
+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(); // 显示对话框
|
|
|
+// });
|
|
|
+
|
|
|
+$(".zoomable").on("click",function() {
|
|
|
+ dialogImg.src = $(this).data('ulr'); // 将缩略图的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>
|
|
|
{Template footer}
|
