jquery - 单击全屏图片

<html>
<head>
<title>
Image Full-Screen  On Click.
</title>
</head>
<body>
<div>

我想在用户单击图像时使其全屏显示，就这么简单，我没有在网络上搜索到正确的答案，因为我不擅长制作自己的Java脚本函数来使用它，所以这是最好的方法去做吧。
并请提供示例(如果有)。

最佳答案

这是我的快速解决方案(不需要CSS，但是您可以根据需要进行调整)。
我在我的网站上使用它，并且效果很好。

$('img[data-enlargeable]').addClass('img-enlargeable').click(function() {
  var src = $(this).attr('src');
  var modal;

  function removeModal() {
    modal.remove();
    $('body').off('keyup.modal-close');
  }
  modal = $('<div>').css({
    background: 'RGBA(0,0,0,.5) url(' + src + ') no-repeat center',
    backgroundSize: 'contain',
    width: '100%',
    height: '100%',
    position: 'fixed',
    zIndex: '10000',
    top: '0',
    left: '0',
    cursor: 'zoom-out'
  }).click(function() {
    removeModal();
  }).appendTo('body');
  //handling ESC
  $('body').on('keyup.modal-close', function(e) {
    if (e.key === 'Escape') {
      removeModal();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img data-enlargeable width="100" style="cursor: zoom-in" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Lichtenstein_img_processing_test.png" />