JavaScript实现弹出层的移动 兼容IE和Firefox

最新推荐文章于 2023-01-09 21:38:14 发布
最新推荐文章于 2023-01-09 21:38:14 发布
阅读量69 收藏
点赞数
分类专栏： JavaScript 文章标签： IE Firefox JavaScript CSS 浏览器 ViewUI 
部分内容是参考的别人的内容 先写上html的部分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>JavaScript自定义弹出对话框</title>
		<link rel="styleSheet" href="inc/style.css" type="text/css" />
		<script type="text/javascript" src="inc/dialog_box.js"></script>
	</head>
	<body>
		<div id="content">
			<p>
		<a href="javascript:showDialog('Warning','出现警告，清自习查看.','warning');">点我</a>
			</p>
		</div>
	</body>
</html>
下面是JavaScript的代码，感觉还不错
var TIMER = 5;
var SPEED = 10;
var WRAPPER = 'content';

//以下的一段代码是为了设定要显示的位置
function pageWidth() {
  return window.innerWidth != null ? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
}

function pageHeight() {
  return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
}

function topPosition() {
  return typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0;
}

function leftPosition() {
  return typeof window.pageXOffset != 'undefined' ? window.pageXOffset : document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0;
}
//通过传递的参数创建div层的信息
function showDialog(title,message,type,autohide) {
  if(!type) {
    type = 'error';
  }
  var dialog;
  var dialogheader;
  var dialogclose;
  var dialogtitle;
  var dialogcontent;
  var dialogmask;
  if(!document.getElementById('dialog')) {
    dialog = document.createElement('div');
    dialog.id = 'dialog';
    dialogheader = document.createElement('div');
    dialogheader.id = 'dialog-header';
    dialogtitle = document.createElement('div');
    dialogtitle.id = 'dialog-title';
    dialogclose = document.createElement('div');
    dialogclose.id = 'dialog-close'
    dialogcontent = document.createElement('div');
    dialogcontent.id = 'dialog-content';
    dialogmask = document.createElement('div');
    dialogmask.id = 'dialog-mask';
    document.body.appendChild(dialogmask);
    document.body.appendChild(dialog);
    dialog.appendChild(dialogheader);
    dialogheader.appendChild(dialogtitle);
    dialogheader.appendChild(dialogclose);
    dialog.appendChild(dialogcontent);
	document.getElementById("dialog-header").onmousedown = function() {
		move(event);
	};
	document.getElementById("dialog-header").onmouseup = function() {
		stopMove(event);
	};

    dialogclose.setAttribute('onclick','hideDialog()');
    dialogclose.onclick = hideDialog;
  } else {
    dialog = document.getElementById('dialog');
    dialogheader = document.getElementById('dialog-header');
    dialogtitle = document.getElementById('dialog-title');
    dialogclose = document.getElementById('dialog-close');
    dialogcontent = document.getElementById('dialog-content');
    dialogmask = document.getElementById('dialog-mask');
    dialogmask.style.visibility = "visible";
    dialog.style.visibility = "visible";
  }

  dialog.style.opacity = .00;
  dialog.style.filter = 'alpha(opacity=0)';
  dialog.alpha = 0;
  var width = pageWidth();
  var height = pageHeight();
  var left = leftPosition();
  var top = topPosition();
  var dialogwidth = dialog.offsetWidth;
  var dialogheight = dialog.offsetHeight;
  var topposition = top + (height / 3) - (dialogheight / 2);
  var leftposition = left + (width / 2) - (dialogwidth / 2);
  dialog.style.top = topposition + "px";
  dialog.style.left = leftposition + "px";
  dialogheader.className = type + "header";
  dialogtitle.innerHTML = title;
  dialogcontent.className = type;
  dialogcontent.innerHTML = message;
  var content = document.getElementById(WRAPPER);
  dialogmask.style.height = content.offsetHeight + 'px';
  dialog.timer = setInterval("fadeDialog(1)", TIMER);
  if(autohide) {
    dialogclose.style.visibility = "hidden";
    window.setTimeout("hideDialog()", (autohide * 1000));
  } else {
    dialogclose.style.visibility = "visible";
  }
}
function hideDialog() {
  var dialog = document.getElementById('dialog');
  clearInterval(dialog.timer);
  dialog.timer = setInterval("fadeDialog(0)", TIMER);
}
function fadeDialog(flag) {
  if(flag == null) {
    flag = 1;
  }
  var dialog = document.getElementById('dialog');
  var value;
  if(flag == 1) {
    value = dialog.alpha + SPEED;
  } else {
    value = dialog.alpha - SPEED;
  }
  dialog.alpha = value;
  dialog.style.opacity = (value / 100);
  dialog.style.filter = 'alpha(opacity=' + value + ')';
  if(value >= 99) {
    clearInterval(dialog.timer);
    dialog.timer = null;
  } else if(value <= 1) {
    dialog.style.visibility = "hidden";
    document.getElementById('dialog-mask').style.visibility = "hidden";
    clearInterval(dialog.timer);
  }
}

//实现浏览器之间的event兼容
function getSrc(event) {
	return (event.srcElement?event.srcElement:event.target);
}

var moving = false;
var px,py;
//实现层的移动
function  move(mevent) {
	//在IE中和Firefox中兼容  按下鼠标左键的事件不同
	if(document.all&&(mevent.button ==1 || mevent.button == 0)) {
		moving = true;
	} else if(event.button == 0) {
		moving = true;
	}
	//点击了左键 可以移动
	if(moving && (mevent.button == 1 || mevent.button == 0)) {
		var head = document.getElementById("dialog");
		px = parseInt(mevent.clientX-head.offsetLeft);
        py = parseInt(mevent.clientY-head.offsetTop);
		document.documentElement.onmousemove = function(mevent) {
			 var eEvent;
             if(document.all) {
			 	 eEvent=event;
			 } else {
			 	eEvent = mevent;
			 }
             var x=eEvent.clientX-px;
             var y=eEvent.clientY-py;
             head.style.left=(x)+"px";
             head.style.top=(y)+"px";
		}
	}
}

//释放层的移动
function stopMove(event) {
	moving = false;
	document.documentElement.onmousemove=null;


下面的css的内容
#content {
	padding: 20px;
}

#dialog {
	position: absolute;
	left: expression(( body . clientWidth-350)/ 2 );
	top: expression(( body . clientHeight-200)/ 2 );
	width: 425px;
	padding: 10px;
	z-index: 200;
	background: #fff;
}

#dialog-header {
	display: block;
	position: relative;
	width: 411px;
	padding: 3px 6px 7px;
	height: 14px;
	font-size: 14px;
	font-weight: bold;
	cursor: move;
}

#dialog-title {
	float: left;
}

#dialog-close {
	float: right;
	cursor: pointer;
	margin: 3px 3px 0 0;
	height: 11px;
	width: 11px;
	background: url(dialog_close.gif) no-repeat
}

#dialog-content {
	display: block;
	height: 160px;
	padding: 6px;
	color: #666666;
	font-size: 13px
}

#dialog-mask {
	position: absolute;
	top: 0;
	left: 0;
	min-height: 100%;
	width: 100%;
	background: #FFF;
	opacity: .75;
	filter: alpha(opacity = 75,style = 0);
	z-index: 100;
}
.warning {
	background: #fff url(warning_bg.jpg) bottom right no-repeat;
	border: 1px solid #c5a524;
	border-top: none
}

.warningheader {
	background: url(warning_header.gif) repeat-x;
	color: #957c17;
	border: 1px solid #c5a524;
	border-bottom: none
}

具体的代码见附件里面
xyzchen126
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 多浏览器兼容问题及解决方案
gxll499294075的博客
03-10 1688
1. document.formName.item("itemName") 问题 问题说明： IE下，可以使用 document.formName.item("itemName") 或者 document.formName.elements["elementName"]; Firefox下， 只能使用 document.formName.elements["elementName"]; 解决办法： 统一使用 document.formName.ele...
用JavaScript编写弹出层原理分析及初步实现
guaguapi_ndsc的专栏
09-07 2039
目录        基本原理        具体步骤        完整实例代码        兼容性检查        总结 基本原理        利用JS编写弹出层，关键是要知道JavaScript操作HTML文档的原理，即要知道HTML DOM。        我们编写的一个个网页实际上是一份份HTML文档，这份HTML文档包括标签和标签之间的内容。JavaScri
js控制浏览器窗口弹出、警告框、确认框
Rockandrollman的博客
01-09 1303
js控制浏览器窗口弹出、警告框、确认框。
js在ie和火狐浏览器里面的兼容问题
风雨无阻，执着追求!!!
09-30 744
像这种下拉二级菜单的js，第一级菜单a标签一般是没有连接的，href=“#”在ie里面没有问题的，但放到火狐里面就点击不出二级菜单了，把href=“#”改成href=“#hgs”就不会出现点击不了的情况了，在#后面加些内容例如一两个字母就可以了
可移动的弹出层源码
五刀砍不死
06-27 855
直接复制下面的代码，新建一个后缀为.html的文件即可运行。 兼容火狐/IE7的可移动弹出层 .button1 { background: #ebebeb; border: 1px solid #888888; color:#333333; font-family: Arial, Helvetica, sans-serif; font-size: 12px; height
js弹出层可移动
weixin_37615490的博客
07-20 1371
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; cha
JS的IE和Firefox兼容性汇编<转>
mystruts_1的专栏
09-06 687
1.document.form.item 问题 (1)现有问题： 现有代码中存在许多 document.formName.item("itemName")这样的语句，不能在 MF 下运行 (2)解决方法： 改用 document.formName.elements["el
javascript 打造城市选择控件，兼容IE6以及以上，谷歌，Firefox
热门推荐
qachenzude的专栏
08-27 1万+
我实现的步骤： 一、先用一定的格式罗列出控件所需要的城市以及拼音等，我这里是按照如下格式罗列成一个数组, 如果需要增加城市，直接增加在数组里面即可：       城市我是一个一个手打的。。。 ['北京|beijing|bj','上海|shanghai|sh', '重庆|chongqing|cq'] 二、因为控件的城市分组按好几类划分，比如：按首字母HOT 、ABCDEFH  、
js弹出层
凉皮，肉夹馍
11-07 85
弹出层效果:        下面是在网上找的代码:    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1...
使用JavaScript实现弹出层效果的简单实例
10-22
下面小编就为大家带来一篇使用JavaScript实现弹出层效果的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Javascript的IE和Firefox兼容性汇编(zz)
10-31
Javascript的IE和Firefox兼容性汇编(zz)
兼容最新firefox、chrome和IE的javascript图片预览实现代码
10-25
主要介绍了兼容最新firefox、chrome和IE的javascript图片预览实现代码,测试了浏览器firefox6、firefox12、chrome 25.0.1364.172 m、IE6-IE10 都兼容,需要的朋友可以参考下
Javascript在IE和Firefox浏览器常见兼容性问题总结
10-21
主要介绍了Javascript在IE和Firefox浏览器常见兼容性问题,结合实例形式总结分析了javascript在IE与Firefox浏览器中常见的各种兼容性问题与相应的解决方法,需要的朋友可以参考下
pyzmq-23.1.0-cp310-cp310-musllinux_1_1_x86_64.whl
06-07
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
MAVEN 教程和详细讲解
06-07
MAVEN 教程和讲解
人工智能基础知识背诵（大学生期末）
06-07
人工智能基础知识背诵（大学生期末）
pyzmq-25.1.0-cp37-cp37m-musllinux_1_1_x86_64.whl
最新发布
06-07
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
JavaScript实现弹出
06-08
弹出框有很多种实现方式，以下是一种常见的JavaScript实现弹出框的方法： ```javascript alert("Hello World!"); ``` 这行代码会弹出一个包含"Hello World!"文本的弹出框。除了alert()方法，还有其他方法可以实现...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值