ボタンを押すと、ダイアログウィンドウが表示されます。タイトルバーをマウスドラッグしてダイアログウィンドウを移動できます。
ダイアログ表示1 ダイアログ表示2 ダイアログ表示1
この中は自由に記述
ダイアログ１のタイトル
この中は自由に記述
ダイアログ２のタイトル
閉じるソースコード
<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>ダイアログ１のタイトル</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>ダイアログ２のタイトル</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;z-index:1000;}",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>