js和html5生成自动排列的对话框

来源：互联网发布：linux查看光纤卡流量编辑：程序博客网时间：2024/06/06 04:28

最近用js和html5写出的弹出多个对话框，并且可以自动排列，占满屏幕时会自动从新开始，话不多说直接上图：

用起来还是十分方便的，如果你感兴趣，代码在后面

首先是Html页面

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body style="width: 100vw;height: 100vh;padding: 0;margin: 0"><input type="button" value="生成div" onclick="creatDialog()" style="position: absolute;z-index: 200;"/><script src="index.js"></script></body></html>

然后是js

function creatDialog() {    // 获取屏幕的宽度和高度    var wid=document.body.clientWidth;    var hei=document.body.clientHeight;    //根据已有dialog计算下一个dialog位置    var obj=document.getElementsByClassName("dialog");    //5和10为间距    var top=5;    var left=10;    if(obj.length!=0){       //不是第一次生成        var h=parseInt(hei/(274+5));//求出总行数        var w=parseInt(wid/(300+10));//求出总列数        var n=parseInt(obj.length/h);//位于第n+1列        if(n+1<=w){            var m=obj.length%h//位于第m+1行            top=(274+5)*m+5;            left=(300+10)*n+10;        }else {            //屏幕满了移除所有对象，从新开始            removeDialog();             top=5;             left=10;        }    }//生成dialog    var dialog=document.createElement('div');    dialog.className="dialog";    dialog.id="dialog"+obj.length;    dialog.style.position="absolute";    dialog.style.marginLeft=left+"px";    dialog.style.marginTop=top+"px";    dialog.style.width="300px";    dialog.style.height="274px";    dialog.style.border="solid 1px";    dialog.style.backgroundColor="#FF0000";    document.body.appendChild(dialog);}function removeDialog() {    var obj=document.getElementsByClassName("dialog");    var num=obj.length;    for(var i=0;i<num;i++){        document.body.removeChild(document.getElementById("dialog"+i));    }}

阅读全文

0 1