提示：您可以先修改部分代碼再運行
<!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=utf-8" /><meta name="description" content="彈出層" /><meta name="keywords" content="對彈出層的小型封裝,可以在一個頁面彈出多個層." /><script language="javascript">var popup_dragging = false;var popup_target;var popup_mouseX;var popup_mouseY;var popup_mouseposX;var popup_mouseposY;var popup_oldfunction;function popup_display(x){var win = window.open();for (var i in x) win.document.write(i+' = '+x[i]+'<br>');}// ----- popup_mousedown -------------------------------------------------------function popup_mousedown(e){var ie = navigator.appName == "Microsoft Internet Explorer";if ( ie && window.event.button != 1) return;if (!ie && e.button != 0) return;popup_dragging = true;popup_target = this['target'];popup_mouseX = ie ? window.event.clientX : e.clientX;popup_mouseY = ie ? window.event.clientY : e.clientY;if (ie)popup_oldfunction = document.onselectstart;else popup_oldfunction = document.onmousedown;if (ie)document.onselectstart = new Function("return false;");else document.onmousedown = new Function("return false;");}// ----- popup_mousemove -------------------------------------------------------function popup_mousemove(e){if (!popup_dragging) return;var ie = navigator.appName == "Microsoft Internet Explorer";var element = document.getElementById(popup_target);var mouseX = ie ? window.event.clientX : e.clientX;var mouseY = ie ? window.event.clientY : e.clientY;element.style.left = (element.offsetLeft+mouseX-popup_mouseX)+'px';element.style.top = (element.offsetTop +mouseY-popup_mouseY)+'px';popup_mouseX = ie ? window.event.clientX : e.clientX;popup_mouseY = ie ? window.event.clientY : e.clientY;}// ----- popup_mouseup ---------------------------------------------------------function popup_mouseup(e){if (!popup_dragging) return;popup_dragging = false;var ie = navigator.appName == "Microsoft Internet Explorer";var element = document.getElementById(popup_target);if (ie)document.onselectstart = popup_oldfunction;else document.onmousedown = popup_oldfunction;}// ----- popup_exit ------------------------------------------------------------function popup_exit(e){var ie = navigator.appName == "Microsoft Internet Explorer";var element = document.getElementById(popup_target);popup_mouseup(e);element.style.visibility = 'hidden';element.style.display = 'none';}// ----- popup_show ------------------------------------------------------------function popup_show(id){element = document.getElementById('popup'+id);drag_element = document.getElementById('popup_drag'+id);exit_element = document.getElementById('popup_exit'+id);element.style.position = "absolute";element.style.visibility = "visible";element.style.display = "block";element.style.left = (document.documentElement.scrollLeft+popup_mouseposX-10)+'px';element.style.top = (document.documentElement.scrollTop +popup_mouseposY-10)+'px';drag_element['target'] = 'popup'+id;drag_element.onmousedown = popup_mousedown;exit_element.onclick = popup_exit;}// ----- popup_mousepos --------------------------------------------------------function popup_mousepos(e){var ie = navigator.appName == "Microsoft Internet Explorer";popup_mouseposX = ie ? window.event.clientX : e.clientX;popup_mouseposY = ie ? window.event.clientY : e.clientY;}// ----- Attach Events ---------------------------------------------------------if (navigator.appName == "Microsoft Internet Explorer")document.attachEvent('onmousedown', popup_mousepos);else document.addEventListener('mousedown', popup_mousepos, false);if (navigator.appName == "Microsoft Internet Explorer")document.attachEvent('onmousemove', popup_mousemove);else document.addEventListener('mousemove', popup_mousemove, false);if (navigator.appName == "Microsoft Internet Explorer")document.attachEvent('onmouseup', popup_mouseup);else document.addEventListener('mouseup', popup_mouseup, false);</script> <title>狐狸的BLOG----彈出層的一個小型封裝</title><style>div.sample_popup { z-index: +1; }div.menu_form_header{cursor:move}div.sample_popup div.menu_form_header{border-bottom: 0px;cursor: default;cursor:move;width: 190px;height: 20px;line-height:24px;vertical-align: middle;background:#34A2DC;color:#FFF;text-decoration: none;font-weight: 900;font-size: 13px;padding-left:10px;overflow:hidden;}div.sample_popup div.menu_form_body{border: 3px solid #34A2DC;width: 194px;background:#FFF;font-size:12px;}div.sample_popup img.menu_form_exit{float: right;margin: 5px 5px 0px 0px;cursor: pointer;}div.sample_popup form{margin: 0px;padding: 8px 10px 10px 10px;}.menu_form_body a {text-decoration: none;}</style></head><body><div onclick="popup_show(1)">登入</div><div class="sample_popup" id="popup1" ><div class="menu_form_header" id="popup_drag1">視窗一</div><div class="menu_form_body">好的好的好的的</div></div><div onclick="popup_show(2)">登入</div><div class="sample_popup" id="popup2" ><div class="menu_form_header" id="popup_drag2">視窗二</div><div class="menu_form_body">niniinini </div></div></body></html> </td> </tr></table>
提示：您可以先修改部分代碼再運行
