js html5生成自动排列对话框实例

最近用射流研究…和html5写出的弹出多个对话框，并且可以自动排列，占满屏幕时会自动从新开始，话不多说直接上图：用起来还是十分方便的，如果你感兴趣，代码在后面

首先是超文本标记语言页面

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title/title/head body style=' width : 100 VW；高度： 100 VHpadd : 0；边距： 0 '输入类型='按钮'值='生成div ' onclick=' creatDialog()' style=' position : absolute；z指数： 200；/script src=' http :索引。js '/脚本/正文/html然后是射流研究…

函数creatDialog() { //获取屏幕的宽度和高度var wid=文档。尸体。客户端宽度；var hei=文档。尸体。客户身高；//根据已有对话计算下一个对话位置var obj=文档。getelementsbyclassname('对话框')；//5和10为间距var top=5；var left=10if(obj.length！=0){ //不是第一次生成var h=ParSeint(hei/(274 5))；//求出总行数var w=par sent(wid/(300 ^ 10))；//求出总列数var n=ParSeint(obj。长度/小时)；//位于第n 1列if(n 1=w){ var m=obj.length%h//位于第m 1行top=(274 5)* m 5；左=(300 10)* n 10；}else { //屏幕满了移除所有对象，从新开始removeDialog()；top=5；左=10;} } //生成对话框变量对话框=文档。创建元素(' div ')；dialogdialog。id=' dialog ' obj。长度；dialog.style.position="绝对";对话。风格。左边距=左边“px”；对话。风格。marginTop=top ' px对话。风格。宽度=' 300像素'；对话。风格。高度=' 274像素'；对话。风格。边框=' solid 1px对话。风格。背景颜色=' # ff 0000document.body.appendChild(对话框);}函数移除对话框(){ var obj=document。getelementsbyclassname('对话框')；var num=obj . length for(var I=0；因纽姆；I){文档。尸体。移除子文档。getelementbyid(' dialog ' I))；} } 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。