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

最新推荐文章于 2023-10-24 14:47:25 发布

GIS开发者

最新推荐文章于 2023-10-24 14:47:25 发布

阅读量743

点赞数

分类专栏：前端开发文章标签： html5 对话框 javascript 自动排列

本文链接：https://blog.csdn.net/GISuuser/article/details/77540032

版权

前端开发专栏收录该内容

53 篇文章 3 订阅

订阅专栏

最近用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" οnclick="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));
    }
}