ImagePreview.js
const BoxEle = document.createElement(‘div‘) const ImgEle = document.createElement(‘img‘) function ImagePreviewOpen(url) { $(ImgEle).css({ ‘max-width‘: ‘100%‘ }) $(ImgEle).attr(‘src‘, url) BoxEle.appendChild(ImgEle) $(BoxEle).css({ width: ‘100%‘, height: ‘100vh‘, position: ‘fixed‘, top: ‘0‘, ‘background-color‘: ‘#141414d1‘, display: ‘flex‘, ‘align-items‘: ‘center‘, ‘justify-content‘: ‘center‘ }) document.body.appendChild(BoxEle) $(‘body‘).css({ ‘overflow-x‘: ‘hidden‘, ‘overflow-y‘: ‘hidden‘ }) ImagePreviewClose() } function ImagePreviewClose() { $(BoxEle).click((e) => { $(BoxEle).remove() $(‘body‘).css({ ‘overflow-x‘: ‘auto‘, ‘overflow-y‘: ‘auto‘ }) }) }
引入调用
ImagePreviewOpen(‘https://img01.jpg‘)