JavaScript dialog弹出div提示效果代码

作者：袖梨 2022-06-25

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

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Dialog</title>
	<link rel="stylesheet" href="<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>/dialog.css">
</head>
<body>
	<div style="text-align: center; padding: 30px 0; ">
		<p>
			<a href="#" id="trigger" style="font-weight: bold; font-size: 18px;">点我试试</a>
		</p>
		<p>
			<a href="#" id="another" style="font-weight: bold; font-size: 18px;">再点一下</a>
		</p>
		<p id="pos" style="padding: 10px 0;"></p>
	</div>

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';
	}

/**
	 * 浏览器窗口大小变化时居中弹窗
	 */
	window.onresize = function () {
		if (dialog && dialog.style.display == 'block') {
			center();
		}
	};

/**
	 * 滚动浏览器时居中弹窗
	 */
	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></td>
	  </tr>
	</table>

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

JavaScript dialog弹出div提示效果代码

相关文章

精彩推荐