js und html5 realisieren die Generierung eines automatischen Anordnungsdialogfelds-js-Tutorial-php.cn

js und html5 realisieren die Generierung eines automatischen Anordnungsdialogfelds

小云云

Freigeben： 2018-01-26 09:19:36

Original

2048 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich ein Beispiel für ein von js+html5 generiertes automatisches Anordnungsdialogfeld vor. Ich hoffe, es kann jedem helfen .

Kürzlich mit js und html5 geschrieben, können mehrere Popup-Dialogfelder automatisch angeordnet werden. Wenn der Bildschirm voll ist, wird er automatisch von vorne gestartet. Schauen Sie sich einfach das Bild an :
Verwenden Sie es Es ist immer noch sehr praktisch. Wenn Sie interessiert sind, finden Sie den Code auf der Rückseite

Die erste ist die HTML-Seite

<!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="生成p" onclick="creatDialog()" style="position: absolute;z-index: 200;"/> 
<script src="index.js"></script> 
</body> 
</html>

Nach dem Login kopieren

Dann 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(&#39;p&#39;); 
  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)); 
  } 
}

Nach dem Login kopieren

Verwandte Empfehlungen:

WeChat-Applet verwendet die modale Komponente, um Konversationen aufzurufen. Teilen von Box-Instanzen

JS-Tutorial zum Erstellen eines einfachen Dialogfelds

10 empfohlen Kurse zu Dialogfeldern

Das obige ist der detaillierte Inhalt vonjs und html5 realisieren die Generierung eines automatischen Anordnungsdialogfelds. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!