|
|
|
部分内容是参考的别人的内容 先写上html的部分<!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=gb2312" /><title>JavaScript自定义弹出对话框</title><link rel="styleSheet" href="inc/style.css" type="text/css" /><script type="text/javascript" src="inc/dialog_box.js"></script></head><body><div id="content"><p><a href="javascript:showDialog('Warning','出现警告，清自习查看.','warning');">点我</a></p></div></body></html>下面是JavaScript的代码，感觉还不错var TIMER = 5;var SPEED = 10;var WRAPPER = 'content';//以下的一段代码是为了设定要显示的位置function pageWidth() { return window.innerWidth != null ? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;}function pageHeight() { return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;}function topPosition() { return typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0;}function leftPosition() { return typeof window.pageXOffset != 'undefined' ? window.pageXOffset : document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0;}//通过传递的参数创建div层的信息function showDialog(title,message,type,autohide) { if(!type) { type = 'error'; } var dialog; var dialogheader; var dialogclose; var dialogtitle; var dialogcontent; var dialogmask; if(!document.getElementById('dialog')) { dialog = document.createElement('div'); dialog.id = 'dialog'; dialogheader = document.createElement('div'); dialogheader.id = 'dialog-header'; dialogtitle = document.createElement('div'); dialogtitle.id = 'dialog-title'; dialogclose = document.createElement('div'); dialogclose.id = 'dialog-close' dialogcontent = document.createElement('div'); dialogcontent.id = 'dialog-content'; dialogmask = document.createElement('div'); dialogmask.id = 'dialog-mask'; document.body.appendChild(dialogmask); document.body.appendChild(dialog); dialog.appendChild(dialogheader); dialogheader.appendChild(dialogtitle); dialogheader.appendChild(dialogclose); dialog.appendChild(dialogcontent);document.getElementById("dialog-header").onmousedown = function() {move(event);};document.getElementById("dialog-header").onmouseup = function() {stopMove(event);}; dialogclose.setAttribute('onclick','hideDialog()'); dialogclose.onclick = hideDialog; } else { dialog = document.getElementById('dialog'); dialogheader = document.getElementById('dialog-header'); dialogtitle = document.getElementById('dialog-title'); dialogclose = document.getElementById('dialog-close'); dialogcontent = document.getElementById('dialog-content'); dialogmask = document.getElementById('dialog-mask'); dialogmask.style.visibility = "visible"; dialog.style.visibility = "visible"; } dialog.style.opacity = .00; dialog.style.filter = 'alpha(opacity=0)'; dialog.alpha = 0; var width = pageWidth(); var height = pageHeight(); var left = leftPosition(); var top = topPosition(); var dialogwidth = dialog.offsetWidth; var dialogheight = dialog.offsetHeight; var topposition = top + (height / 3) - (dialogheight / 2); var leftposition = left + (width / 2) - (dialogwidth / 2); dialog.style.top = topposition + "px"; dialog.style.left = leftposition + "px"; dialogheader.className = type + "header"; dialogtitle.innerHTML = title; dialogcontent.className = type; dialogcontent.innerHTML = message; var content = document.getElementById(WRAPPER); dialogmask.style.height = content.offsetHeight + 'px'; dialog.timer = setInterval("fadeDialog(1)", TIMER); if(autohide) { dialogclose.style.visibility = "hidden"; window.setTimeout("hideDialog()", (autohide * 1000)); } else { dialogclose.style.visibility = "visible"; }}function hideDialog() { var dialog = document.getElementById('dialog'); clearInterval(dialog.timer); dialog.timer = setInterval("fadeDialog(0)", TIMER);}function fadeDialog(flag) { if(flag == null) { flag = 1; } var dialog = document.getElementById('dialog'); var value; if(flag == 1) { value = dialog.alpha + SPEED; } else { value = dialog.alpha - SPEED; } dialog.alpha = value; dialog.style.opacity = (value / 100); dialog.style.filter = 'alpha(opacity=' + value + ')'; if(value >= 99) { clearInterval(dialog.timer); dialog.timer = null; } else if(value <= 1) { dialog.style.visibility = "hidden"; document.getElementById('dialog-mask').style.visibility = "hidden"; clearInterval(dialog.timer); }}//实现浏览器之间的event兼容function getSrc(event) {return (event.srcElement?event.srcElement:event.target);}var moving = false;var px,py;//实现层的移动function move(mevent) {//在IE中和Firefox中兼容 按下鼠标左键的事件不同if(document.all&&(mevent.button ==1 || mevent.button == 0)) {moving = true;} else if(event.button == 0) {moving = true;}//点击了左键 可以移动if(moving && (mevent.button == 1 || mevent.button == 0)) {var head = document.getElementById("dialog");px = parseInt(mevent.clientX-head.offsetLeft); py = parseInt(mevent.clientY-head.offsetTop);document.documentElement.onmousemove = function(mevent) { var eEvent; if(document.all) { eEvent=event; } else { eEvent = mevent; } var x=eEvent.clientX-px; var y=eEvent.clientY-py; head.style.left=(x)+"px"; head.style.top=(y)+"px";}}}//释放层的移动function stopMove(event) {moving = false;document.documentElement.onmousemove=null;下面的css的内容#content {padding: 20px;}#dialog {position: absolute;left: expression(( body . clientWidth-350)/ 2 );top: expression(( body . clientHeight-200)/ 2 );width: 425px;padding: 10px;z-index: 200;background: #fff;}#dialog-header {display: block;position: relative;width: 411px;padding: 3px 6px 7px;height: 14px;font-size: 14px;font-weight: bold;cursor: move;}#dialog-title {float: left;}#dialog-close {float: right;cursor: pointer;margin: 3px 3px 0 0;height: 11px;width: 11px;background: url(dialog_close.gif) no-repeat}#dialog-content {display: block;height: 160px;padding: 6px;color: #666666;font-size: 13px}#dialog-mask {position: absolute;top: 0;left: 0;min-height: 100%;width: 100%;background: #FFF;opacity: .75;filter: alpha(opacity = 75,style = 0);z-index: 100;}.warning {background: #fff url(warning_bg.jpg) bottom right no-repeat;border: 1px solid #c5a524;border-top: none}.warningheader {background: url(warning_header.gif) repeat-x;color: #957c17;border: 1px solid #c5a524;border-bottom: none}具体的代码见附件里面 |
|
京ICP备14020293号-2
本网站内容均收集于互联网，如有问题请联系QQ:389897944予以删除
窥视卡
雷达卡
楼主
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡