您的位置:澳门新葡亰平台官网下载 > 新蒲京-服务器 > 澳门新葡亰平台官网下载JavaScript写的一个自定义弹出式对话框代码_javascript技巧_脚本之家

澳门新葡亰平台官网下载JavaScript写的一个自定义弹出式对话框代码_javascript技巧_脚本之家

2019-11-26 15:01

下图是我的设计思路 下面是具体的js代码 1,首先定义几个自定义函数 代码 复制代码 代码如下: //判断是否为数组 function isArray { return v && typeof v.length == 'number' && typeof v.splice == 'function'; } //创建元素 function createEle { return document.createElement; } //在body中添加子元素 function appChild { return document.body.appendChild; } //从body中移除子元素 function remChild { return document.body.removeChild; } 2,具体的窗体实现代码 代码 复制代码 代码如下: //弹出窗口,标题、html、宽度、高度、是否为模式对话框、按钮(关闭按钮为默认,格式为['按钮1',fun1,'按钮2',fun2]数组形式,前面为按钮值,后面为按钮onclick事件) function showWindow(title,html,width,height,modal,buttons) { //避免窗体过小 if { width = 300; } if { height = 200; } //声明mask的宽度和高度 var w,h; //可见区域宽度和高度 var cw = document.body.clientWidth; var ch = document.body.clientHeight; //正文的宽度和高度 var sw = document.body.scrollWidth; var sh = document.body.scrollHeight; //可见区域顶部距离body顶部和左边距离 var st = document.body.scrollTop; var sl = document.body.scrollLeft; w = cw > sw ? cw:sw; h = ch > sh ? ch:sh; //避免窗体过大 if { width = w; } if { height = h; } //如果modal为true,即模式对话框的话,就要创建一透明的掩膜 if { var mask = createEle; mask.style.cssText = "position:absolute;left:0;top:0px;background:#fff;filter:Alpha;opacity:0.5;z-index:10000;width:"

  • w + "px;height:" + h + "px;"; appChild; } //这是主窗体 var win = createEle; win.style.cssText = "position:absolute;left:" + + "px;top:" +
  • "px;background:#f0f0f0;z-index:10001;width:" + width + "px;height:" + height + "px;border:solid 2px #afccfe;"; //标题栏 var tBar = createEle; //afccfe,dce8ff,2b2f79 tBar.style.cssText = "margin:0;width:" + width + "px;height:25px;background:url;cursor:move;"; //标题栏中的文字部分 var titleCon = createEle; titleCon.style.cssText = "float:left;margin:3px;"; titleCon.innerHTML = title;//firefox不支持innerText,所以这里用innerHTML tBar.appendChild; //标题栏中的“关闭按钮” var closeCon = createEle; closeCon.style.cssText = "float:right;width:20px;margin:3px;cursor:pointer;";//cursor:hand在firefox中不可用 closeCon.innerHTML = "×"; tBar.appendChild; win.appendChild; //窗体的内容部分,CSS中的overflow使得当内容大小超过此范围时,会出现滚动条 var htmlCon = createEle; htmlCon.style.cssText = "text-align:center;width:" + width + "px;height:" + + "px;overflow:auto;"; htmlCon.innerHTML = html; win.appendChild; //窗体底部的按钮部分 var btnCon = createEle; btnCon.style.cssText = "width:" + width + "px;height:25px;text-height:20px;background:url;text-align:center;padding-top:3px;"; //如果参数buttons为数组的话,就会创建自定义按钮 if { var length = buttons.length; if { if { for (var i = 0; i < length; i = i + 2) { //按钮数组 var btn = createEle; btn.innerHTML = buttons[i];//firefox不支持value属性,所以这里用innerHTML // btn.value = buttons[i]; btn.onclick = buttons[i + 1]; btnCon.appendChild; //用户填充按钮之间的空白 var nbsp = createEle; nbsp.innerHTML = "  "; btnCon.appendChild; } } } } //这是默认的关闭按钮 var btn = createEle; // btn.setAttribute; btn.innerHTML = '关闭'; // btn.value = '关闭'; btnCon.appendChild; win.appendChild; appChild; /*************************************以下为拖动窗体事件*********************/ //鼠标停留的X坐标 var mouseX = 0; //鼠标停留的Y坐标 var mouseY = 0; //窗体到body顶部的距离 var toTop = 0; //窗体到body左边的距离 var toLeft = 0; //判断窗体是否可以移动 var moveable = false; //标题栏的按下鼠标事件 tBar.onmousedown = function() { var eve = getEvent(); moveable = true; mouseX = eve.clientX; mouseY = eve.clientY; toTop = parseInt; toLeft = parseInt; //移动鼠标事件 tBar.onmousemove = function { var eve = getEvent(); var x = toLeft + eve.clientX - mouseX; var y = toTop + eve.clientY - mouseY; if (x > 0 && && y > 0 && { win.style.left = x + "px"; win.style.top = y + "px"; } } } //放下鼠标事件,注意这里是document而不是tBar document.onmouseup = function() { moveable = false; } } //获取浏览器事件的方法,兼容ie和firefox function getEvent() { return window.event || arguments.callee.caller.arguments[0]; } //顶部的标题栏和底部的按钮栏中的“关闭按钮”的关闭事件 btn.onclick = closeCon.onclick = function; remChild; } } 实例调用 复制代码 代码如下: str = "看看我的窗体效果"; showWindow('我的提示框',str,850,250,true,['地区',fun1,'矿种',fun2]); 更为完整实用的代码,包括定义和调用 代码 复制代码 代码如下:

自定义弹出对话框

此脚本在ie,firefox浏览器下运行通过。。。。

本文由澳门新葡亰平台官网下载发布于新蒲京-服务器,转载请注明出处:澳门新葡亰平台官网下载JavaScript写的一个自定义弹出式对话框代码_javascript技巧_脚本之家

关键词: