提示：您可以先修改部分代碼再運行
<!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>點我試試</p><p>再點一下</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.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>
提示：您可以先修改部分代碼再運行
