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

这篇文章主要介绍了使用JavaScript和HTML5创建自动排列对话框的实例。在这个实例中，你可以弹出多个对话框，它们会自动排列，当屏幕被占满时，会自动从新开始排列。这是一个非常实用的功能，对于开发者来说，具有很高的参考价值。

一、HTML页面

我们创建了一个基本的HTML页面，其中包含一个按钮，用于触发对话框的生成。页面的宽度和高度被设置为全屏，以确保对话框可以在整个屏幕上排列。

```html

```

二、JavaScript实现

在JavaScript部分，我们定义了两个函数：`creatDialog()`用于创建新的对话框，`removeDialog()`用于移除所有已存在的对话框。在`creatDialog()`函数中，我们首先获取屏幕的宽度和高度，然后根据已存在的对话框计算下一个对话框的位置。如果屏幕已经被占满，我们会移除所有对话框，然后重新开始。

```javascript

function creatDialog() {

var wid = document.body.clientWidth;

var hei = document.body.clientHeight;

var obj = document.getElementsByClassName("dialog");

var left = 10;

var top = 5;

// ...（省略部分代码）

// 生成新的对话框

var dialog = document.createElement('div');

dialog.className = "dialog";

dialog.id = "dialog" + obj.length;

// ...（省略部分代码）

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));

}

}

```

这是一个非常实用的功能，对于需要创建弹出对话框的应用来说，具有很高的参考价值。希望这个例子能够帮助大家更好地理解如何使用JavaScript和HTML5创建自动排列的对话框。也希望大家能够多多支持类似的学习资源。以上就是本文的全部内容。