#js #jquery 点击预览图片

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')