|
@@ -1,36 +1,4 @@
|
|
|
{Template header}
|
|
{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>
|
|
<body>
|
|
|
<div class="warp">
|
|
<div class="warp">
|
|
|
<div class="title winnone">订单颜色参照 - 查看</div>
|
|
<div class="title winnone">订单颜色参照 - 查看</div>
|
|
@@ -93,50 +61,4 @@ dialog::backdrop {
|
|
|
<input type="hidden" name="id" value="{$colour['id']}" />
|
|
<input type="hidden" name="id" value="{$colour['id']}" />
|
|
|
<div class="button"><font class="fh">关 闭</font></div>
|
|
<div class="button"><font class="fh">关 闭</font></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>
|
|
|
|
|
-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}
|
|
{Template footer}
|
