Windows風のモーダルダイアログ表示

• ホーム
• Javascript,CSS,HTMLデザイン無料素材集
• Windows風のモーダルダイアログ表示

ボタンを押すと、ダイアログウィンドウが表示されます。タイトルバーをマウスドラッグしてダイアログウィンドウを移動できます。

ソースコード

<script>
window.addEventListener('DOMContentLoaded',function(event){
  //スタイル エレメントを作成
  let style = document.createElement("style");
  document.head.appendChild(style);
  //classにcssを定義
  style.sheet.insertRule(
    ".mamDlg{position:absolute;width:200px;display:block;"+
    "border:1px solid #000000;display:none;left:50px;top:200px;background-color:#FFFFFF;"+
    "box-shadow:5px 10px 20px rgba(0,0,0,0.4);}", 0);
  style.sheet.insertRule(
    ".mamDlg .hd{width:100%;height:30px;background: linear-gradient(-135deg,#6688FF,#0033FF);display:inline-block;margin:0;}",0);
  style.sheet.insertRule(
    ".mamDlg .hd .tit{width:80%;height:100%;color:#FFFFFF;display:inline-block;cursor:move;margin:auto;}",0);
  style.sheet.insertRule(
    ".mamDlg .hd .bt{color:#FFFFFF;display:inline-block;cursor:pointer;width:20%;height:100%;"+
    "margin:auto;text-align:center;"+//"box-shadow: 0 -8px 5px -2px #6688FF inset;}", 0);
  style.sheet.insertRule(".mamDlg .con{display:inline-block;background:linear-gradient(160deg,#FFFFFF,#CCCCCC);height:auto;width:100%;}",0);
  style.sheet.insertRule("@keyframes mamDlgBackHideq{0%{opacity:0.5;} 99%{opacity:0.0;} 100%{opacity:0.0;}}");
  style.sheet.insertRule("@keyframes mamDlgBackShowq{0%{opacity:0.0;} 1%{opacity:0.0;} 100%{opacity:0.5;}}");
  style.sheet.insertRule(".mamDlgBackShow{z-index:65000;position:fixed;opacity:0.5;background:#000000;"+
    "left:0;top:0;width:100%;height:100%;overflow:hidden;display:block;animation:mamDlgBackShowq 0.5s;animation-fill-mode: forwards;}");
  style.sheet.insertRule(".mamDlgBackHide{z-index:65000;position:fixed;background:#000000;"+
    "left:0;top:0;width:100%;height:100%;overflow:hidden;animation:mamDlgBackHideq 0.2s linear 0s;animation-fill-mode: forwards;}");

  function TmamDlg(){
    let elms=document.getElementsByClassName('mamDlgShow');
    for(i=0;i<elms.length;i++){
      elms[i].addEventListener('click',function(){
        mamDlg.show(this);
      });
    }
    this.dlgs=document.getElementsByClassName('mamDlg');
    for(i=0;i<this.dlgs.length;i++){
      this.dlgs[i].setAttribute('tabindex','0');
      let hds=this.dlgs[i].getElementsByClassName('hd');
      for(j=0;j<hds.length;j++){
        let tits=hds[j].getElementsByClassName('tit');
        for(k=0;k<tits.length;k++){
          tits[k].addEventListener('mousedown',function(event){
            mamDlg.xxx=event.pageX-this.parentNode.parentNode.offsetLeft;
            mamDlg.yyy=event.pageY-this.parentNode.parentNode.offsetTop;
            mamDlg.mflag=true;
            mamDlg.elm=this.parentNode.parentNode;
          });
        }
        let bts=hds[j].getElementsByClassName('bt');
        for(k=0;k<bts.length;k++){
          bts[k].addEventListener('click',function(event){
            this.parentNode.parentNode.style.display='none';
            mamDlg.back.classList.remove('mamDlgBackShow');
            mamDlg.back.classList.add('mamDlgBackHide');
            setTimeout(function(){mamDlg.back.style.display='none';},500);
          });
        }
      }
    }
    document.body.addEventListener('mousemove',function(event){
      if(mamDlg.mflag){
        event.preventDefault();
        mamDlg.elm.style.left=(event.pageX - mamDlg.xxx) + "px";
        mamDlg.elm.style.top =(event.pageY - mamDlg.yyy) + "px";
      }
    });
    document.addEventListener('mouseup',function(event){
      mamDlg.mflag=false;
    });

    this.show=function(obj){
      let box=obj.getBoundingClientRect();
      if(obj.hasAttribute("data-target")){
        id=obj.getAttribute("data-target");
        let dl=document.getElementById(id);
        dl.style.display='block';
        dl.style.left=(box.left+window.pageXOffset)+"px";
        dl.style.top =(box.bottom+window.pageYOffset)+"px";
        dl.style.zIndex=65001;
        dl.focus();
        this.back.classList.remove('mamDlgBackHide');
        this.back.classList.add('mamDlgBackShow');
        this.back.style.display='block';
        this.back.style.width =Math.max(document.documentElement.clientWidth ,document.documentElement.scrollWidth )+'px';
        this.back.style.height=Math.max(document.documentElement.clientHeight,document.documentElement.scrollHeight)+'px';
      }
    }
    this.back=document.createElement("div");
    this.back.addEventListener('click',function(){
      this.classList.remove('mamDlgBackShow');
      this.classList.add('mamDlgBackHide');
      mamDlg.hide();
    });
    document.body.appendChild(this.back);
    this.hide=function(){
      let dlgs=document.getElementsByClassName('mamDlg');
      for(i=0;i<dlgs.length;i++){
        dlgs[i].style.display='none';
      }
      setTimeout(function(){mamDlg.back.style.display='none';},200);
    }
  }
  window.addEventListener("resize",function(){
    mamDlg.back.style.width =Math.max(document.documentElement.clientWidth ,document.documentElement.scrollWidth )+'px';
    mamDlg.back.style.height=Math.max(document.documentElement.clientHeight,document.documentElement.scrollHeight)+'px';
  });
  mamDlg=new TmamDlg;
});
</script>

<div>
    <button class="mamDlgShow" data-target="dlg1" data-inline="true">ダイアログ表示</button>
</div>

<div class="mamDlg" id="dlg1">
  <div class="hd"><div class="tit">タイトルa</div><div class="bt">×</div></div>
  <div class="con">
    <h1>コンテンツ</h1>
    <input type="checkbox" id="ch1" /><label for="ch1">選択1</label>
    <input type="checkbox" id="ch2" /><label for="ch2">選択2</label>
    <input type="checkbox" id="ch3" /><label for="ch3">選択3</label>
  </div>
</div>