Tip: you can modify some code before running
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>Dialog</title><link rel="stylesheet" href="css/dialog.css"></head><body><div ><p>Click here to try</p><p>Click again</p><p id="pos" ></p></div><script type="text/javascript" >/*** Dialog */var Dialog = function () {var dialog, shadow, dragger, posX, posY, title, content; function create_dialog () {if (! Dialog) {// create shadowshadow = document. createElement ('div '); shadow. setAttribute ('id', 'dialogshadow'); // create the dragger of dialogtitle = 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 dialogcontent = document. createElement ('div '); content. setAttribute ('class', 'bd '); // create dialogdialog = document. createElement ('div '); dialog. setAttribute ('id', 'dialog '); dialog. appendChild (dragger); dialog. appendChild (content); // bind eventanchor. onclick = hide; shadow. onclick = hide; // append to bodydocument. 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.doc umentElement. clientWidth; var browser_height = document.doc umentElement. 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 ;}}}/*** drag 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 ';}/*** Center pop-up window when the browser window size changes */window. onresize = function () {if (dialog & dialog. style. display = 'block') {center () ;};/*** center pop-up window during browser scrolling */window. onscroll = function () {if (dialog & dialog. style. display = 'block') {setTimeout (center, 300) ;}};/*** get the scroll distance of the scroll bar */function get_scroll_pos () {var pos = {x: 0, y: 0}; pos. x = document.doc umentElement. scrollLeft | document. body. scrollLeft; pos. y = document.doc umentElement. scrollTop | document. body. scrollTop; return pos;}/*** get the cursor position on the page */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 ('Here is the title', 'Here is the content');}; another. onclick = function () {Dialog. open ('Here is the title', 'Here is the content, but there is a root line.<hr />') ;};/*** Show the coordinates of the mouse */document.doc umentElement. onmousemove = function (event) {event = event | window. event; var scroll = {x: 0, y: 0}; scroll. x = document.doc umentElement. scrollLeft | document. body. scrollLeft; scroll. y = document.doc umentElement. scrollTop | document. body. scrollTop; document. getElementById ('pos '). innerHTML = 'x: '+ (scroll. x + event. clientX) + '; y:' + (scroll. y + event. clientY );};</script></body></html></td> </tr></table>
Tip: you can modify some code before running
