php中用js自定义弹窗,用js实现的自定义的对话框的实现代码_javascript技巧
大家好,我们平时在使用Javascript的时候,经常会需要给用户提供一些反馈信息,完成这个功能有很多种方法。但在平时开发中午我们用的最多的可能就是alert这个函数了(这里只说一般情况,不排除个别高手~),使用这个函数确实很方便,可以很简单的向用户提供一些交互信息。不过它也有很多不足,比如他的外观很简
单,而且不可控制,再有它属于浏览器级别的函数,是由各个浏览器自己实现的,所以在不同的浏览器上面,它的界面都不太一样。如果是在以前,这种情况或许很容
易被大多数用户所接受,不过随着时间的推移,用户越来越希望得到更好的体验。所以现在大家经常会在很多网站上看到JS做出来的各种对话框,这些界面会是用户体
验提升不少,所以今天就说说关于这方面的内容吧,进入正题,不说废话啦~
首先给大家看看效果,先有一个直观的了解:
如上图所示,经过我的测试,这个对话框可以使用在IE6 7 8,Firefox,Chrome等多个主流浏览器中。下面就和大家一起看看他的代码吧。
首先,我们需要判断浏览器的类型,这里用了几个bool变量来代表不同的浏览器。
代码如下:
var springweb_typeIsIE = false;
var springweb_typeIsGecko = false;
var springweb_typeIsWebkit = false;
var springweb_typeIsIE6 = false;
var springweb_typeIsIE7 = false;
var springweb_typeIsIE8 = false;
var springweb_typeIsFireFox = false;
var springweb_typeIsChrome = false;
var springweb_typeIsSafari = false;
var agent = window.navigator.userAgent;
if (agent.indexOf("MSIE 6") != -1) {
springweb_typeIsIE6 = true;
springweb_typeIsIE = true;
}
else if (agent.indexOf("MSIE 7") != -1) {
springweb_typeIsIE7 = true;
springweb_typeIsIE = true;
}
else if (agent.indexOf("MSIE 8") != -1) {
springweb_typeIsIE8 = true;
springweb_typeIsIE = true;
}
else if (agent.indexOf("Firefox") != -1) {
springweb_typeIsFireFox = true;
springweb_typeIsGecko = true;
} else if (agent.indexOf("Chrome") != -1) {
springweb_typeIsChrome = true;
springweb_typeIsWebkit = true;
}
else if (agent.indexOf("Safari") != -1) {
springweb_typeIsSafari = true;
springweb_typeIsWebkit = true;
}
如上所示,这里通过检测agent头来判断不同的浏览器,这是一个比较简单的判断方法。
下面开始构造我们的对话框,在构造对话框前,我们先要制造一种模态窗体的效果(就是当对话框弹出来的时候,用户不能操作页面上的其余内容),这里我们就用一个黑色的透明层来完成这样的效果。
代码如下:
document.body.style.overflowY = "hidden";
var pBackground = document.createElement("p");
pBackground.style.position = "absolute";
pBackground.style.left = "0px";
pBackground.style.top = "0px";
pBackground.style.width = "100%";
pBackground.style.height = "100%";
if (springweb_typeIsChrome || springweb_typeIsFireFox) {
pBackground.style.backgroundColor = "rgba(0,0,0,0.7)";
} else {
pBackground.style.backgroundColor = "#000000";
pBackground.style.filter = "alpha(opacity=70)";
}
pBackground.style.zIndex = "99";
document.body.appendChild(pBackground);
上面的代码,我们首先将浏览器的滚动条禁止,以防止用户在弹出对话框的时候滚动浏览器窗口,接下来设定相应的样式,一个比较重要的就是8-13行,这里根据浏览器的类型来应用不同的CSS样式来达到透明的效果,对于IE浏览器,我们使用IE自带的滤镜功能,而对于其他浏览器,我们使用基于CSS3的rgba方式实现透明效果。
接下来,我们要构造对话框,这里首先创建了一个p层,来代表我们整个对话框。方法如下:
代码如下:
var dialogWidth = 260;
var dialogHeight = 120;
var fontSize = 14;
var lineWidth = document.body.clientWidth * 0.7;
if ((fontSize * msg.length) < lineWidth) {
dialogWidth = parseInt(fontSize * msg.length) + 50;
} else {
dialogWidth = parseInt(lineWidth);
dialogHeight += parseInt(((fontSize * msg.length) / lineWidth) * fontSize);
}
pDialog.style.width = dialogWidth + "px";
pDialog.style.height = dialogHeight + "px";
pDialog.style.position = "absolute";
pDialog.style.border = "1px solid #C0D7FA";
pDialog.style.borderRight = "2px outset #DEDEDE";
pDialog.style.borderLeft = "2px outset #DEDEDE";
pDialog.style.left = ((document.body.clientWidth / 2) - (dialogWidth / 2)) + "px";
pDialog.style.top = ((document.body.clientHeight / 2) - (dialogHeight / 2)) + "px";
pDialog.style.zIndex = "100";
这里,首先根据消息的字数计算了对话框的尺寸(这里的计算方法不一定最好,如果有更好的计算方法还望大家指教),后面那些DOM代码就不用我多解释了吧。
接下来,我们创建对话框的标题栏,这个用来显示对话框的标题,并且用它了实现对话框的拖动操作。
代码如下:
var pHead = document.createElement("p");
if (title != undefined) {
pHead.innerHTML = title;
} else {
pHead.appendChild(document.createTextNode("消息"));
}
pHead.style.width = "100%";
pHead.style.height = "25px";
pHead.style.lineHeight = "25px";
pHead.style.fontSize = "14px";
pHead.style.fontWeight = "bold";
pHead.style.borderBottom = "1px outset #8989FF";
pHead.style.color = "white";
pHead.style.textIndent = "10px";
pHead.style.backgroundColor = "blue";
pHead.style.backgroundImage = "url('" + springweb_basePath + "/images/headbg.png')";
pHead.style.cursor = "move";
pHead.onmousedown = function() {
pDialog.dragging = true;
};
pHead.onmouseup = function() {
pDialog.dragging = false;
};
document.body.onmousemove = function(e) {
if (!pDialog.dragging) return;
e = e || window.event;
var mouseX, mouseY;
var mouseOffsetX, mouseOffsetY;
if (e.pageX || e.pageY) {
mouseX = e.pageX;
mouseY = e.pageY;
} else {
mouseX =
e.clientX + document.body.scrollLeft -
document.body.clientLeft;
mouseY =
e.clientY + document.body.scrollTop -
document.body.clientTop;
}
pDialog.style.left = (mouseX - dialogWidth * 0.4) + "px";
pDialog.style.top = (mouseY - 10) + "px";
};
pDialog.appendChild(pHead);
这里呢,有必要说一下的就是,鼠标按下和弹起事件,这里给p对象多增加了一个dragging的属性,用来代表对话框是否正在拖动中(这也是JS的特性之一,对object类型的对象指定新属性的一个方法:如果之前对象没有这个属性,只需通过对象名.属性名="值" 的方式,就可以为对象增加新属性),在鼠标移动事件中,我们通过对象的dragging属性,来决定是否移动对话框,关于对话框的移动位置,这里我偷懒了~没有判断对话框和鼠标的相对位置,而是给了一个常量,这样每次开始拖动时,对话框会稍微"瞬移"一下,有兴趣的朋友可以帮忙完善一下,呵呵。
最后,是关于对话框内容区域的创建:
代码如下:
var pContent = document.createElement("p");
pContent.style.textAlign = "center";
pContent.style.padding = "15px";
pContent.style.fontSize = "12px";
if (springweb_typeIsIE) {
pContent.style.height = parseInt(dialogHeight - 25) + "px";
} else {
pContent.style.height = parseInt(dialogHeight - 55) + "px";
}
pContent.style.backgroundColor = "#ffffff";
if (springweb_typeIsIE6 || springweb_typeIsIE7 || springweb_typeIsIE8) {
pContent.style.filter =
"progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#FFFFFF,endColorStr=#C2E2F8)";
} else if (springweb_typeIsFireFox) {
pContent.style.backgroundImage =
"-moz-linear-gradient(left,rgba(255,255,255,1),rgba(194,226,248,1))";
} else if (springweb_typeIsWebkit) {
pContent.style.backgroundImage =
"-webkit-gardient(linear,0% 0%,100% 100%,from(#FFFFFF),to(#000000))";
}
pContent.innerHTML = msg + "
";
pDialog.appendChild(pContent);
var closeButton = document.createElement("img");
closeButton.style.cursor = "hand";
closeButton.setAttribute("src", springweb_basePath + "/images/okButton.png");
closeButton.setAttribute("alt", "确定");
//the click event when the dialog is closing.
closeButton.onclick = function() {
document.body.removeChild(pBackground);
document.body.removeChild(pDialog);
document.body.style.overflowY = "";
};
pContent.appendChild(closeButton);
pDialog.focus();
document.body.appendChild(pDialog);
这里应该不用多做解释了,稍微说一下,就是在13-22行的代码,这个是根据不同的浏览器来分别实现渐变效果,IE的话,用微软提供的渐变,Webkit或者Gecko内核的浏览器使用相应的CSS3标准也可以实现渐变效果。
最后嘛,这个方法支持大多数浏览器,个别浏览器如果不能完全支持,还请各位见谅,期待大家有更加完善的方法一起讨论,下面是一个示例,有兴趣的朋友可以看看。转载请注明出处~
示例文件:JS对话框实现
php中用js自定义弹窗,用js实现的自定义的对话框的实现代码_javascript技巧相关推荐
- 用php语句绘制圆锥,JS+canvas画一个圆锥实例代码_javascript技巧
本篇文章给大家讲解html中用canvas函数配合JS画出一个圆锥形的图形实例,canvas是html5中新增加的新属性,对HTML5中的canvas感兴趣的朋友学习测试下吧. 以下是我们给大家分享是 ...
- js删除与php后台交互,js动态添加删除,后台取数据(示例代码)_javascript技巧
环境描述:就像你一般在论坛上发表文章,可能带附件,附件的数量是你手动添加删除的!! /********************************************************* ...
- oracle 取农历函数,获取阴历(农历)和当前日期的js代码_javascript技巧
本文为大家分享了一段js显示阴历(农历)和当前日期的关键性代码,供大家参考,具体内容如下 var CalendarData=new Array(100); var madd=new Array(12) ...
- php 获取当前时间的农历,获取阴历(农历)和当前日期的js代码_javascript技巧
本文为大家分享了一段js显示阴历(农历)和当前日期的关键性代码,供大家参考,具体内容如下 var CalendarData=new Array(100); var madd=new Array(12) ...
- HTML表格行上下移动,键盘上下键移动选择table表格行的js代码_javascript技巧
//这是要操作的表格: 这是第一行 这是第二行 这是第三行 这是第四行 //这是操作表格的代码 var rowNo= -1; var tableId = 'tb'; var inputId = 'sh ...
- php判断当前时间是否跨月,判断日期是否能跨月查询的js代码_javascript技巧
function checkDate(startDate, endDate, num, flag) { if(startDate == null || endDate == null) { popwi ...
- php js 循环对象属性,js 遍历对象的属性的代码_javascript技巧
如: Function.prototype.addMethod=function(methodName,func){ if(!this.prototype[methodName]){ this.pro ...
- php 获取鼠标轨迹,记录鼠标的轨迹并回放的js代码_javascript技巧
遇到的问题: Question ①:mousemove事件中,移动方法中会被记录很多的left和top,我只需要大概的几组数据就行,不需要那么多: Question ②:回放的时候,在for循环里执行 ...
- Android自定义弹窗
每个APP都有自己的UI风格,不可能简单地使用Google自带的弹窗模板.所以是时候搞一套我们自己的弹窗范例代码了.按照下列代码只需要再根据APP的主题风格重新绘制一波弹窗布局,就可以无脑迁移了,这种 ...
最新文章
- Hudson神奇的环境变量
- 计算机三级分类汇总,计算机三级网络考试机试100道分类汇总-整数各位数字运算排序统计.doc...
- python中如何调用类_python如何调用java类
- C++中的endl搭配cout和cin用法
- 44. 源代码解读-RocketMQ-架构
- 【TensorFlow】——合并与分割(stack、concat、split)
- httpstat:一个检查网站性能的 curl 统计分析工具
- IT人回家过年的尴尬
- 在idae中为什么用Module创建一个新的Maven项目的时候会被卡死
- 太古鸿蒙诀正式版v1.07,百变队长安崎:台上小辣椒,台下情歌王
- 【转】最快让你上手ReactiveCocoa之基础篇
- 【进阶修炼】——改善C#程序质量(4)
- vue.js视频教程,vue.js视频教程下载
- vue 基于网易云API实现二维码的登录
- 蒲丰投针实验原理_蒲丰投针原理.DOC
- Epic安装不成功/启动失败“必要的先决条件安装失败“
- 【有奖征询】可查询商票及企业境外债软件有奖征询
- jsp 页面进行debug 断点找错误
- 2022年全球与中国环己胺市场现状及未来发展趋势
- Django3在网页上生成二维码
热门文章
- JAVA后端常用框架SSM,redis,dubbo等
- CentOS 7.2安装zabbix 3.0 LTS
- 符号扩展和无符号扩展
- http参数修改以及拦截
- Asp.net MVC4 与 Web Form 并存
- cocos2dx 3.0研究(1)-- hello world程序
- BZOJ 3304: [Shoi2005]带限制的最长公共子序列( LCS )
- studentdeng的博客
- this关键字实现串联构造函数调用
- OS内核参数(SEM)在高负载的Oracle数据库中如何设置