Lightbox( 点击查看大图 ) - 简悦插件 → https://github.com/Kenshin/simpread/wiki/插件编写

main.js

$content.find("img").click( ( event ) => {
	if ( $content.find( 'sr-plugin-lightbox-bg' ).length > 0 ) return;
	const src       = event.target.currentSrc,
		  width     = event.target.naturalWidth,
		  height    = event.target.naturalHeight;
	$content.append( `<sr-plugin-lightbox-bg><sr-plugin-lightbox><img src="${src}"></img></sr-plugin-lightbox></sr-plugin-lightbox-bg>` )
	const $target   = $( 'sr-plugin-lightbox' ),
		  $img      = $( 'sr-plugin-lightbox' ).find( 'img' ),
		  offset    = 20,
		  maxWidth  = $( 'sr-plugin-lightbox-bg' ).width(),
		  maxHeight = $( 'sr-plugin-lightbox-bg' ).height();
	$target.width( width );
	$target.height( height );
	if ( width + 20 > maxWidth )   {
		$target.width( maxWidth );
		$img.attr( "style", "width:" + maxWidth + "px!important" );
	}
	if ( height + 20 > maxHeight ) {
		$target.height( maxHeight );
		$img.attr( "style", "height:" + maxHeight + "px!important" );
	}
	$( 'sr-plugin-lightbox-bg' ).css( "opacity", 1 );
	$( 'sr-plugin-lightbox-bg' ).on( 'click', event => {
		if ( event.target.tagName.toLowerCase() == 'img' ) {
			const $a = $( `<a style="display:none" href=${src} target="_blank"></a>` ).appendTo( "body" );
			$a[0].click();
			$a.remove();
			return;
		}
		if ( event.target.tagName.toLowerCase() == 'sr-plugin-lightbox' ) $( event.target ).parent().remove();
		else $( event.target ).remove();
	});
});

style.css

sr-plugin-lightbox-bg {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, opacity 1s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    background-color: rgb(119, 119, 119, 0.7);
    z-index: 2147483646;
}

sr-plugin-lightbox {
   text-align: center;
}

sr-plugin-lightbox img {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    border: 10px solid #fff;
    box-shadow: none;
    cursor: pointer;
}