[Javascript] Modalウィンドウ表示の簡単ライブラリ

SourceCode : ソースコード

modal.js

export class Modal{
  constructor(options){
    this.options = options || {}
    this.id = 'modal_'+ (+new Date())
    this.view_bg()
    this.view()
  }
  get window(){
    return document.querySelector(`.modal_window[data-id='${this.id}']`)
  }
  get windows(){
    return document.querySelectorAll(`.modal_window`)
  }
  get content(){
    return this.window.querySelector('.modal_content')
  }
  get bg(){
    return document.querySelector(`.modal_bg`)
  }

  make_area(){
    const div = document.createElement('div')
    div.className = 'modal_window'
    div.setAttribute('data-active','before')
    div.setAttribute('data-id' , this.id)
    div.appendChild(this.make_close())
    div.appendChild(this.make_title())
    div.appendChild(this.make_caption())
    div.appendChild(this.make_content())
    div.appendChild(this.make_buttons())
    return div
  }
  make_title(){
    const div = document.createElement('div')
    div.className = 'modal_title'
    div.innerHTML = this.options.title || ''
    return div
  }
  make_caption(){
    const div = document.createElement('div')
    div.className = 'modal_caption'
    div.innerHTML = this.options.caption || ''
    return div
  }
  make_content(){
    const div = document.createElement('div')
    div.className = 'modal_content'
    div.insertAdjacentHTML('beforeend' , this.options.content || '')
    return div
  }
  make_close(){
    const div = document.createElement('div')
    div.className = 'modal_close'
    div.addEventListener('click' , this.close.bind(this))
    if(this.options.close ? 1 : 0){
      div.setAttribute('data-status' , 'active')
    }
    return div
  }
  make_buttons(){
    const div = document.createElement('div')
    div.className = 'modal_buttons'
    if(this.options.buttons && this.options.buttons.length){
      for(const button_data of this.options.buttons){
        const btn = document.createElement('button')
        btn.className = 'modal_button_cancel'
        btn.textContent = button_data.label || button_data.name || '--'
        if(button_data.click){
          btn.addEventListener('click' , button_data.click)
        }
        div.appendChild(btn)
      }
    }
    return div
  }
  view(){
    this.area = this.make_area()
    document.body.appendChild(this.area)
    setTimeout(this.view_init.bind(this) , 0)
  }
  view_init(){
    this.area.setAttribute('data-active' , 'true')
    this.viewed()
  }
  view_bg(){
    if(this.bg){return}
    const bg = document.createElement('div')
    bg.className = 'modal_bg'
    document.body.appendChild(bg)
    return true
  }

  viewed(){
    if(!this.options.viewed){return}
    this.options.viewed()
  }

  close(){
    const elms = this.windows
    for(const elm of elms){
      elm.parentNode.removeChild(elm)
    }
    if(this.bg){
      this.bg.parentNode.removeChild(this.bg)
    }
    if(this.options.close_event){
      this.options.close_event()
    }
  }
}

modal.css

.modal_window,
.modal_window::before,
.modal_window::after
.modal_window *,
.modal_window *::before,
.modal_window *::after{
  -webkit-box-sizing : border-box;
     -moz-box-sizing : border-box;
      -ms-box-sizing : border-box;
       -o-box-sizing : border-box;
          box-sizing : border-box;
}

.modal_window{
  --time: 0.3s;

  position:fixed;
  left: 50%;
  top : 50%;
  transform:translate(-50%,-50%);
  border-radius:10px;
  font-size:16px;
  width:300px;
  padding:10px;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
  background-color:white;
  
  transition-property:margin opacity;
  transition-duration:var(--time);
}
.modal_window[data-active='before']{
  margin-top:-50px;
  opacity:0;
}
.modal_window[data-active='true']{
  margin-top:0px;
  opacity:1;
}
.modal_window > *:empty{
  display:none;
}

.modal_window .modal_title{
  font-size: 0.8em;
  padding: 5px;
}

.modal_window .modal_caption{
  font-size: 0.8em;
  padding: 5px;
}

.modal_window .modal_content{
  font-size: 0.8em;
  padding: 5px;
  margin:20px 0;
}

.modal_window .modal_buttons{
  font-size: 0.8em;
  padding: 5px;
  display:flex;
  justify-content: space-around;
  gap:10px;
}
.modal_window .modal_buttons > *{
  padding:5px 10px;
  min-width:25%;
}
.modal_window .modal_buttons button{
  cursor:pointer;
}

.modal_window select,
.modal_window input:not([type='checkbox'],[type='radio']){
  padding:10px;
  font-size:16px;
  border:1px solid #aaa;
  border-radius:5px;
  width:100%;
  margin-bottom:5px;
}

.modal_window .modal_close{
  position:absolute;
  width:20px;
  height:20px;
  right:10px;
  top:10px;
  cursor:pointer;
}
.modal_window .modal_close[data-status='active']{
  display:block;
}
.modal_window .modal_close:hover{
  opacity:0.5;
}
.modal_window .modal_close::before,
.modal_window .modal_close::after{
  content: '';
  position:absolute;
  width:100%;
  height:1px;
  top:50%;
  left:50%;
  background-color: black;
}
.modal_window .modal_close::before{
  transform:translate(-50%,-50%) rotate(45deg);
}
.modal_window .modal_close::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}


.modal_bg{
  position:fixed;
  width:100vw;
  height:100vh;
  top:0;
  left:0;
  background-color:rgba(0,0,0,0.3);
}

Howto : 使い方

var modal = new Modal({
  title : 'Modalウィンドウタイトル',
  caption : 'Modalウィンドウ表示',
  content : 'Modal content (html)',
  close  : true,
  buttons : [
    {
      label : 'cancel',
      click : (()=>{
        // キャンセルボタンを押した時の処理
        modal.close()}
      ),
      style : {
        width : '30%',
      },
    },
    {
      label : 'OK',
      click : (()=>{
        // OKボタンをクリックした時の処理
      }),
      style : {
        width : '30%',
      },
    },
  ],
  close_event : (()=>{
    // Modalウィンドウを閉じた時の処理
  }),
  viewed : (()=>{
    // Modalウィンドウが表示した後の処理
  })
})