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


Posted in Javascript onOctober 09, 2017

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

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" onclick="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)); 
  } 
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery异步循环获取功能实现代码
Sep 19 Javascript
JavaScript中使用Substring删除字符串最后一个字符
Nov 03 Javascript
使用typeof判断function是否存在于上下文
Aug 14 Javascript
js选项卡的实现方法
Feb 09 Javascript
H5手机端多文件上传预览插件
Apr 21 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
JavaScript插件Tab选项卡效果
Nov 14 Javascript
在vue中使用jointjs的方法
Mar 24 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 Javascript
javascript使用Blob对象实现的下载文件操作示例
Apr 18 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 #jQuery
详解如何让Express支持async/await
Oct 09 #Javascript
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 #jQuery
Node.JS使用Sequelize操作MySQL的示例代码
Oct 09 #Javascript
基于zepto.js实现登录界面
Oct 09 #Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 #Javascript
jQuery实现html双向绑定功能示例
Oct 09 #jQuery
You might like
php mssql 日期出现中文字符的解决方法
2009/03/10 PHP
php下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
PHP时间格式控制符对照表分享
2013/07/23 PHP
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
理解PHP中的Session及对Session有效期的控制
2016/01/08 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
php版微信公众平台接口开发之智能回复开发教程
2016/09/22 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
JS事件在IE与FF中的区别详细解析
2013/11/20 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
2018/08/24 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
Python创建模块及模块导入的方法
2015/05/27 Python
Python实现简易端口扫描器代码实例
2017/03/15 Python
Python实现爬取需要登录的网站完整示例
2017/08/19 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
解决pip安装的第三方包在PyCharm无法导入的问题
2020/10/15 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
数控专业应届生求职信
2013/11/27 职场文书
大学军训感言200字
2014/02/26 职场文书
关于分班的感言
2015/08/04 职场文书
vue 实现上传组件
2021/05/31 Vue.js