motsu0/01.simple-img-modal.html

## 01.simple-img-modal.html
<!-- headタグ内 / in <head> -->
<link rel="path/to/simple-img-modal.css">

<!-- bodyタグの終了直前 / before </body> -->
<script src="path/to/simple-img-modal.js"></script>
<script>
  const modal = new simpleImgModal();
</script>

<!-- 画像を置きたい場所 / in your html -->
<img data-large="[path/to/image.jpg]" src="[path/to/image_thumb.jpg]" alt="[image_alt]" class="SIM_img">

## 02.simple-img-modal.css
@charset "utf-8";
.SIM_img{
  cursor: pointer;
}
.SIM_cover{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;

  background-color: rgba(0,0,0,.5);
  cursor: zoom-out;
}
.SIM_inner{
  display: inline-block;
  padding: 4px;

  background-color: #fff;
}
.SIM_img-large{
  display: block;
  max-width: 90vw;
  max-height: 90vh;
}
/*  */
.SIM_s-hide{
  display: none;
}

## 03.simple-img-modal.js
/*!
 * simple-img-modal.js v1.0
 *
 * Copyright (c) 2022 motsu
 *
 * Released under the MIT license.
 * see https://opensource.org/licenses/MIT
 */
class simpleImgModal{
  #el_cover;
  #el_inner;
  #img;

  constructor(){
    const els_img = document.getElementsByClassName('SIM_img');
    this.#el_cover = document.createElement('div');
    this.#el_cover.classList.add('SIM_cover');
    this.#el_cover.classList.add('SIM_s-hide');
    this.#el_inner = document.createElement('div');
    this.#el_inner.classList.add('SIM_inner');
    this.#el_cover.appendChild(this.#el_inner);
    this.#img = document.createElement('img');
    this.#img.classList.add('SIM_img-large');
    document.body.appendChild(this.#el_cover);

    this.#img.onload = ()=>{
      this.#el_inner.textContent = '';
      this.#el_inner.appendChild(this.#img);
    };

    [...els_img].forEach(el=>{
      el.addEventListener('click',()=>{
        this.#view(el);
      });
    });
    this.#el_cover.addEventListener('click',()=>{
      this.#close();
    });
  }

  #view(el){
    this.#el_inner.textContent = '読み込み中';
    this.#el_cover.classList.remove('SIM_s-hide');
    this.#img.src = el.dataset.large;
  }
  #close(){
    this.#el_cover.classList.add('SIM_s-hide');
  }
}
	<!-- headタグ内 / in <head> -->
	<link rel="path/to/simple-img-modal.css">

	<!-- bodyタグの終了直前 / before </body> -->
	<script src="path/to/simple-img-modal.js"></script>
	<script>
	const modal = new simpleImgModal();
	</script>

	<!-- 画像を置きたい場所 / in your html -->
	<img data-large="[path/to/image.jpg]" src="[path/to/image_thumb.jpg]" alt="[image_alt]" class="SIM_img">
	@charset "utf-8";
	.SIM_img{
	cursor: pointer;
	}
	.SIM_cover{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;

	background-color: rgba(0,0,0,.5);
	cursor: zoom-out;
	}
	.SIM_inner{
	display: inline-block;
	padding: 4px;

	background-color: #fff;
	}
	.SIM_img-large{
	display: block;
	max-width: 90vw;
	max-height: 90vh;
	}
	/* */
	.SIM_s-hide{
	display: none;
	}
	/*!
	* simple-img-modal.js v1.0
	*
	* Copyright (c) 2022 motsu
	*
	* Released under the MIT license.
	* see https://opensource.org/licenses/MIT
	*/
	class simpleImgModal{
	#el_cover;
	#el_inner;
	#img;

	constructor(){
	const els_img = document.getElementsByClassName('SIM_img');
	this.#el_cover = document.createElement('div');
	this.#el_cover.classList.add('SIM_cover');
	this.#el_cover.classList.add('SIM_s-hide');
	this.#el_inner = document.createElement('div');
	this.#el_inner.classList.add('SIM_inner');
	this.#el_cover.appendChild(this.#el_inner);
	this.#img = document.createElement('img');
	this.#img.classList.add('SIM_img-large');
	document.body.appendChild(this.#el_cover);

	this.#img.onload = ()=>{
	this.#el_inner.textContent = '';
	this.#el_inner.appendChild(this.#img);
	};

	[...els_img].forEach(el=>{
	el.addEventListener('click',()=>{
	this.#view(el);
	});
	});
	this.#el_cover.addEventListener('click',()=>{
	this.#close();
	});
	}

	#view(el){
	this.#el_inner.textContent = '読み込み中';
	this.#el_cover.classList.remove('SIM_s-hide');
	this.#img.src = el.dataset.large;
	}
	#close(){
	this.#el_cover.classList.add('SIM_s-hide');
	}
	}