ボタンを押すと、ダイアログウィンドウが表示されます。タイトルバーをマウスドラッグしてダイアログウィンドウを移動できます。
ソースコード
<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>
タイトルa
×
コンテンツ
タイトルb
×
コンテンツ
タイトルc
×
コンテンツ
サンプルダイアログ