Javascriptでオリジナルのダイアログウィンドウ表示

Javascriptでオリジナルのダイアログウィンドウ表示


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





この中は自由に記述

ダイアログ1のタイトル

この中は自由に記述

ダイアログ2のタイトル

ソースコード

<div>
  <button onclick="mamdlg.show('dlg1')" data-inline="true">ダイアログ表示1</button>
  <br>
  <br>
  <button onclick="mamdlg.show('dlg2')" data-inline="true">ダイアログ表示2</button>
  <br>
  <br>
  <button onclick="mamdlg.show('dlg1')" data-inline="true">ダイアログ表示1</button>
</div>
<div class="mamDlg" id="dlg1">
  <div>
    この中は自由に記述
    <h3>ダイアログ1のタイトル</h3>
    <input type="radio" id="rd1" name="rd"><label for="rd1">選択1</label>
    <input type="radio" id="rd2" name="rd"><label for="rd2">選択2</label>
    <input type="radio" id="rd3" name="rd"><label for="rd3">選択3</label>
  </div>
</div>
<div class="mamDlg" id="dlg2">
  <div>
    この中は自由に記述
    <h3>ダイアログ2のタイトル</h3>
    <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>
    <button onclick="mamdlg.close()">閉じる</button>
  </div>
</div> 

<script>
  function TMamDlg(){
    let i;
    this.moving=false;
    let style = document.createElement("style");
    document.head.appendChild(style);
    style.sheet.insertRule(".mamDlg{position:absolute;border:1px solid #666;margin:0;padding:0em;box-shadow:8px 16px 28px 0 rgba(0,0,0,0.5);background:#FFF;display:none;}",0);
    style.sheet.insertRule(
      ".mamDlg>div:nth-child(1){margin:0;padding:2px;height:16px;border-bottom:1px solid #666;background:linear-gradient(0deg,#DDD,#FFF);cursor:pointer;}",0
    );
    style.sheet.insertRule(
      ".mamDlg>div:nth-child(1)>a{display:inline-block;border-radius:50%;width:10px;height:10px;margin:2px;padding:0;border:1px solid #AAA;cursor:pointer;}",0
    );
    style.sheet.insertRule(
      ".mamDlgBackground{position:none;display:block;left:0;top:0;right:0;bottom:0;marigin:0;padding:0;background:rgba(0,0,0,0.3);display:block;}",0
    );
    style.sheet.insertRule(".mamDlg>div:nth-child(1)>a:nth-child(1){background:red;}",0);
    style.sheet.insertRule(".mamDlg>div:nth-child(1)>a:nth-child(2){background:orange;}",0);
    style.sheet.insertRule(".mamDlg>div:nth-child(1)>a:nth-child(3){background:green;}",0);
    style.sheet.insertRule(".mamDlg>div:nth-child(2){display:block;background:none;padding:0em;margin:0.5em;font-size:16px;}",0);

    this.dlg=document.querySelectorAll(".mamDlg");
    for(i=0;i<this.dlg.length;i++){
      this.dlg[i].addEventListener("mousedown",function(){event.stopPropagation();});
      this.dlg[i].addEventListener("mouseup",function(){event.stopPropagation();});
      this.dlg[i].addEventListener("touchstart",function(){event.stopPropagation();},{passive: true});
      this.dlg[i].addEventListener("touchend",function(){event.stopPropagation();},{passive: true});
    }
    this.x=0;
    this.y=0;
    this.obj=null;//現在開いているdlg

    this.down=function(event){
      event.stopPropagation();
      if(event.type=='mousedown'){
        this.dlg.x=event.pageX-event.target.parentNode.offsetLeft;
        this.dlg.y=event.pageY-event.target.parentNode.offsetTop;
      }else if(event.type='touchstart'){
        this.dlg.x=event.touches[0].pageX-event.target.parentNode.offsetLeft;
        this.dlg.y=event.touches[0].pageY-event.target.parentNode.offsetTop;
      }
      this.dlg.obj=event.target.parentNode;
      this.dlg.bar=event.target;
      event.target.style.cursor='move';
      this.dlg.moving=true;
    }
    this.move=function(event){
      if(this.dlg.obj!==null && this.dlg.moving){
        event.stopPropagation();
        let xx,yy;
        if(event.type=='mousemove'){
          xx=(event.pageX - this.dlg.x);
          yy=(event.pageY - this.dlg.y);
        }else if(event.type='touchmove'){
          xx=(event.touches[0].pageX - this.dlg.x);
          yy=(event.touches[0].pageY - this.dlg.y);
        }
        window.getSelection().removeAllRanges();
        if(xx<1){xx=1;}
        if(yy<1){yy=1;}
        if((window.innerWidth-90)<xx){xx=window.innerWidth-90;}
        this.dlg.obj.style.left= xx+"px";
        this.dlg.obj.style.top = yy+"px";
      }
    }
    this.up=function(event){
      if(this.dlg.obj!==null && this.dlg.moving){
        event.stopPropagation();
        this.dlg.bar.style.cursor=undefined;
        this.dlg.bar.removeAttribute("style");
        this.dlg.moving=false;
      }
    }
    this.close=function(event){
      this.obj=null;
      for(i=0;i<this.dlg.length;i++){
        this.dlg[i].style.display="none";
      }
    }
    this.closew=function(event){
      this.dlg.obj=null;
      for(i=0;i<this.dlg.dlg.length;i++){
        this.dlg.dlg[i].style.display="none";
      }
    }
    this.show=function(dlg_id){
      let r=event.target.getBoundingClientRect();
      let dlg=document.getElementById(dlg_id);
      dlg.style.display="block";
      dlg.style.left=(r.left+window.pageXOffset+2)+"px";
      dlg.style.top=(r.bottom+window.pageYOffset+2)+"px";
      dlg.scrollIntoView({behavior:'smooth', block:'nearest', inline:'nearest'});
    }
    this.init=function(){
      //init dialog
      for(i=0;i<this.dlg.length;i++){
        if(this.dlg[i].children.length==1){
          let bd=this.dlg[i].children[0];
          let bar=document.createElement("div");
          let btn1=document.createElement("a");
          let btn2=document.createElement("a");
          let btn3=document.createElement("a");
          btn1.addEventListener('click',{handleEvent:function(event){this.dlg.dlg[this.i].style.display="none";},dlg:this,i:i});
          btn2.addEventListener('click',{handleEvent:function(event){this.dlg.dlg[this.i].style.display="none";},dlg:this,i:i});
          btn3.addEventListener('click',{handleEvent:function(event){this.dlg.dlg[this.i].style.display="none";},dlg:this,i:i});
          bar.appendChild(btn1);
          bar.appendChild(btn2);
          bar.appendChild(btn3);
          this.dlg[i].insertBefore(bar,bd);
          bar.addEventListener("mousedown",{handleEvent:this.down,dlg:this});
          bar.addEventListener("touchstart",{handleEvent:this.down,dlg:this},{passive: true});
          bar.addEventListener('mouseup',{handleEvent:this.up,dlg:this});
          bar.addEventListener('touchend',{handleEvent:this.up,dlg:this},{passive: true});
        }
      }
    }
    window.addEventListener('mousedown',{handleEvent:this.closew,dlg:this});
    window.addEventListener('touchstart',{handleEvent:this.closew,dlg:this});
    window.addEventListener('mousemove',{handleEvent:this.move,dlg:this});
    window.addEventListener('touchmove',{handleEvent:this.move,dlg:this});
    window.addEventListener('mouseup',{handleEvent:this.up,dlg:this});
    window.addEventListener('touchend',{handleEvent:this.up,dlg:this});
    this.init();
  }
  window.addEventListener('DOMContentLoaded',function(){
    mamdlg=new TMamDlg;
  });
</script>
Mam's WebSite