【javascript学习指南】JavaScript dialog弹出div提示效果代码

更新时间：2018-09-14 来源：php常用代码手机版 字体：大中小

【www.bbyears.com--php常用代码】

提示：您可以先修改部分代码再运行

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Dialog</title>
	<link rel="stylesheet" href="css/dialog.css">
</head>
<body>
	
		<p>
			点我试试
		</p>
		<p>
			再点一下
		</p>
		<p id="pos" style="padding: 10px 0;"></p>

function create_dialog () {
		if ( !dialog ) {
			//create shadow
			shadow = document.createElement("div");
			shadow.setAttribute("id", "dialogShadow");

//create the dragger of dialog
			title = document.createElement("h3");
			var anchor = document.createElement("a");
			anchor.setAttribute("id", "dialogClose");
			dragger = document.createElement("div");
			dragger.setAttribute("class", "hd");
			dragger.setAttribute("id", "dialogDragger");
			dragger.appendChild(title);
			dragger.appendChild(anchor);

//create the body of dialog
			content = document.createElement("div");
			content.setAttribute("class", "bd");

//create dialog
			dialog = document.createElement("div");
			dialog.setAttribute("id", "dialog");
			dialog.appendChild(dragger);
			dialog.appendChild(content);

//bind event
			anchor.onclick = hide;
			shadow.onclick = hide;

//append to body
			document.body.appendChild(shadow);
			document.body.appendChild(dialog);
		}
		center();
	}

function insert_content (tit, cnt) {
		title.innerHTML = tit;
		content.innerHTML = cnt;
	}

function hide() {
		dialog.style.display = "none";
		shadow.style.display = "none";
		title.innerHTML = "";
		content.innerHTML = "";
	}

function center () {
		shadow.style.display = "block";
		dialog.style.display = "block";

var scroll_pos     = get_scroll_pos();
		var popup_width    = dialog.offsetWidth;
		var popup_height   = dialog.offsetHeight;
		var browser_width  = document.documentElement.clientWidth;
		var browser_height = document.documentElement.clientHeight;
		var offset_left    = (browser_width - popup_width)/2 + scroll_pos.x;
		var offset_top     = (browser_height - popup_height)/2 + scroll_pos.y - 15;

dialog.style.left = offset_left + "px";
		dialog.style.top = offset_top + "px";

if (dragger) {
			dragger.onmousedown = down;
			dragger.onmouseup = function () {
				document.onmousemove = null;
			};
		}
	}

/**
	 * 拖拽dialog
	 */
	function down (event) {
		var point = get_mouse_point(event);
		posX = point.x - parseInt(dialog.style.left);
		posY = point.y - parseInt(dialog.style.top);
		document.onmousemove = move;
	};
	function move (event) {
		event = event || window.event;
		var point = get_mouse_point(event);
		dialog.style.left = (point.x - posX) + "px";
		dialog.style.top = (point.y - posY) + "px";
	}

/**
	 * <a href="http://www.bbyears.com/clist-122-1.html" target="_blank" class="keylink">浏览器</a>窗口大小变化时居中弹窗
	 */
	window.onresize = function () {
		if (dialog && dialog.style.display == "block") {
			center();
		}
	};

/**
	 * 滚动<a href="http://www.bbyears.com/clist-122-1.html" target="_blank" class="keylink">浏览器</a>时居中弹窗
	 */
	window.onscroll = function () {
		if (dialog && dialog.style.display == "block") {
			setTimeout(center, 300);
		}
	};

/**
	 * 获取滚动条滚动过的距离
	 */
	function get_scroll_pos () {
		var pos = {
			x: 0,
			y: 0
		};
		pos.x = document.documentElement.scrollLeft || document.body.scrollLeft;
		pos.y = document.documentElement.scrollTop || document.body.scrollTop;
		return pos;
	}

/**
	 * 获取鼠标在页面上的位置
	 */
	function get_mouse_point(event) {
		var event = event || window.event;
		var point = {
			x:0,
			y:0
		};
	 	var pos = get_scroll_pos();
		point.x = event.clientX + pos.x;
		point.y = event.clientY + pos.y;
		return point;
	}

return {
		open: function (tit, cnt) {
			create_dialog();
			insert_content(tit, cnt);
		}
	};
}();
</script>
	<script type="text/javascript">
		var trigger = document.getElementById("trigger");
		var another = document.getElementById("another");
		trigger.onclick = function () {
			Dialog.open("这里是标题", "这里是内容");
		};
		another.onclick = function () {
			Dialog.open("这里还是标题", "这里还是内容哦，只不过多了根线<hr />");
		};

/**
		 * 显示鼠标的坐标
		 */
		document.documentElement.onmousemove = function (event) {
			event = event || window.event;
			var scroll = {
				x: 0,
				y: 0
			};
			scroll.x = document.documentElement.scrollLeft || document.body.scrollLeft;
			scroll.y = document.documentElement.scrollTop || document.body.scrollTop;

document.getElementById("pos").innerHTML = "x: " + (scroll.x + event.clientX) + "; y: " + (scroll.y + event.clientY);
		};
	</script>
</body>
</html>

提示：您可以先修改部分代码再运行

本文来源：http://www.bbyears.com/jiaocheng/44348.html

链接：http://www.bbyears.com/jiaocheng/44348.html
【javascript学习指南】JavaScript dialog弹出div提示效果代码(转载时请注明本文出处及链接)

猜你感兴趣

php5.3下载_PHP5.3的VC9、VC6、Thread Safe、Non Thread Safe的区别 2018-09-14
【javascript学习指南】javascript限制用户只能输汉字中文 2018-09-14
jquery增加删除html标签属性|jQuery增加删除HTML标签实例详解 2018-09-14
js实现网页标题栏|js实现网页标题栏闪烁提示效果代码 2018-09-14
【shell实现ssh自动登录】shell实现ssh自动登陆服务器脚本 2018-09-14
装修合同|ufw 防火墙规则的顺序问题 2018-09-14
linux编译c程序_linux中cake编译安装apache-2.4.x环境方法 2018-09-14
【linux中configuration】linux中./configure命令参数解析 2018-09-14
【php简单日历代码】php简单日历实现程序代码 2018-09-14
【apache虚拟路径配置文件】apache虚拟路径配置和映射中文路径 2018-09-14

本类排行

本类最新

更多>>

【javascript学习指南】JavaScript dialog弹出div提示效果代码

猜你感兴趣

热门标签

本类排行

本类最新