您好,登錄后才能下訂單哦!
最近用js和html5寫出的彈出多個(gè)對(duì)話框,并且可以自動(dòng)排列,占滿屏幕時(shí)會(huì)自動(dòng)從新開始,話不多說直接上圖:
用起來還是十分方便的,如果你感興趣,代碼在后面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body > <input type="button" value="生成div" onclick="creatDialog()" /> <script src="index.js"></script> </body> </html>
然后是js
function creatDialog() { // 獲取屏幕的寬度和高度 var wid=document.body.clientWidth; var hei=document.body.clientHeight; //根據(jù)已有dialog計(jì)算下一個(gè)dialog位置 var obj=document.getElementsByClassName("dialog"); //5和10為間距 var top=5; var left=10; if(obj.length!=0){ //不是第一次生成 var h=parseInt(hei/(274+5));//求出總行數(shù) var w=parseInt(wid/(300+10));//求出總列數(shù) 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 { //屏幕滿了移除所有對(duì)象,從新開始 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)); } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。