用层模拟对话框

View Post

//Author:Daviv

//Blog:<a href="<a href="" target="_blank">http</a>" target="_blank"><a href="" target="_blank">http://</a></a>

//Date:2006-10-28

function sAlert(str){

var msgw,msgh,bordercolor;

msgw=400;//提示窗口的宽度

msgh=100;//提示窗口的高度

bordercolor="#336699";//提示窗口的边框颜色

titlecolor="#99CCFF";//提示窗口的标题颜色

var sWidth,sHeight;

sWidth=document.body.offsetWidth;

sHeight=document.body.offsetHeight;

var bgObj=document.createElement("div");

bgObj.setAttribute('id','bgDiv');

bgObj.style.position="absolute";

bgObj.style.top="0";

bgObj.style.background="#777";

bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";

bgObj.style.opacity="0.6";

bgObj.style.left="0";

bgObj.style.width=sWidth + "px";

bgObj.style.height=sHeight + "px";

document.body.appendChild(bgObj);

var msgObj=document.createElement("div")

msgObj.setAttribute("id","msgDiv");

msgObj.setAttribute("align","center");

msgObj.style.position="absolute";

msgObj.style.background="white";

msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";

msgObj.style.border="1px solid " + bordercolor;

msgObj.style.width=msgw + "px";

msgObj.style.height=msgh + "px";

msgObj.style.top=(document.documentElement.scrollTop + (sHeight-msgh)/2) + "px";

msgObj.style.left=(sWidth-msgw)/2 + "px";

var title=document.createElement("h4");

title.setAttribute("id","msgTitle");

title.setAttribute("align","right");

title.style.margin="0";

title.style.padding="3px";

title.style.background=bordercolor;

title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";

title.style.opacity="0.75";

title.style.border="1px solid " + bordercolor;

title.style.height="18px";

title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";

title.style.color="white";

title.style.cursor="pointer";

title.innerHTML="关闭";

title.onclick=function(){

document.body.removeChild(bgObj);

document.getElementById("msgDiv").removeChild(title);

document.body.removeChild(msgObj);

}

document.body.appendChild(msgObj);

document.getElementById("msgDiv").appendChild(title);

var txt=document.createElement("p");

txt.style.margin="1em 0"

txt.setAttribute("id","msgTxt");

txt.innerHTML=str;

document.getElementById("msgDiv").appendChild(txt);

}

</SCRIPT>

</BODY></HTML>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>自定义弹出对话框</title>

var Class = {

create: function() {

return function() {

return this.init.apply(this, arguments);

}

};

Object.extend = function(dest, source) {

for (prop in source) {

dest[prop] = source[prop];

}

return dest;

}

Object.extend(String.prototype, {

Trim : function() {

return this.replace(/(^\s*) | (\s*$)/g, "");

lTrim : function() {

return this.replace(/(^\s*)/g, "");

rTrim : function() {

return this.replace(/(\s*$)/g, "");

}

})

Function.prototype.bind = function() {

var __method = this, args = $A(arguments), object = args.shift();

return function() {

return __method.apply(object, args.concat($A(arguments)));

}

function $(id) {

return document.getElementById(id);

}

var $A = function(iterable) {

if (!iterable) return [];

if (iterable.toArray) {

return iterable.toArray();

} else {

var results = [];

for (var i = 0; i < iterable.length; i++)

results.push(iterable[i]);

return results;

}

function OKTag(a, b, c, value) {

alert("arguments : \n" + a + " : " + b + " : " + c + "; \n value = " + value);

//Todo

}

var CustomDlg = Class.create();

CustomDlg.prototype = {

init: function(id, callback_func) {

if (!this._dlg) {

this._bShowStatus = false;

this._dlg = $(id);

this._form = this._dlg.getElementsByTagName("form")[0];

this._inputObj = this._form.elements["content"];

this._OKBtn = this._form.elements["OK"];

this._ResetBtn = this._form.elements["reset"];

this._closeBtn = $("CustomDlg_Close");

this._DlgTitle = $("CustomDlg_TitleBar");

this._form.onsubmit = function(evt) { //OK Event

if (callback_func) {

var rtnValue = this._getValue();

this._close();

callback_func(rtnValue);

}

return false; //防止提交到服务器

}.bind(this);

this._ResetBtn.onclick = function(evt) { //Reset Event

this._inputObj.focus();

}.bind(this);

this._closeBtn.onclick = function(evt) { //Destory Event

this._close();

}.bind(this);

window.onresize = function(evt) { //Change Window Event

if ("none" != this._dlg.style.display)

this._show();

}.bind(this);

this._dlg.onselectstart = function(evt) {

if (!evt) evt = window.event;

var srcElem = evt.target || evt.srcElement;

if (srcElem != this._inputObj)

return false;

}.bind(this);

this._DlgTitle.style.cursor = "default";

this._DlgTitle.onmousedown = function(obj, limit, evt) { //Drag Event

this._fDragging(obj, evt, limit);

}.bind(this, this._dlg, false); //注意参数传递方式，也可以写成下面这样

DlgTitle.onmousedown = function(evt) {

this._fDragging(this._dlg, evt, false);

}.bind(this);

}

if (!this._bShowStatus)

this._show();

_show: function() {

this._bShowStatus = true;

this._dlg.style.visibility = "hidden";

this._dlg.style.display = "";

var dLeft = ((document.documentElement.clientWidth - this._dlg.clientWidth) / 2) + document.documentElement.scrollLeft;

var dTop = ((document.documentElement.clientHeight - this._dlg.clientHeight) / 2) + document.documentElement.scrollTop;

if (dTop < 0 || dLeft < 0) {

this._inputObj.blur();

return false;

}

this._dlg.style.left = dLeft + "px";

this._dlg.style.top = dTop + "px";

this._dlg.style.visibility = "visible";

this._inputObj.focus();

if (document.addEventListener) {

document.addEventListener('keydown', this._keypress.bind(this), true);

} else if (document.attachEvent) {

document.attachEvent('onkeydown', this._keypress.bind(this));

}

_close: function() {

this._bShowStatus = false;

this._dlg.style.display = "none";

this._dlg.style.visibility = "hidden";

this._inputObj.value = "";

this._inputObj.blur();

if(document.addEventListener) {

document.removeEventListener('keydown', this._keypress.bind(this), true);

} else if(document.attachEvent) {

document.detachEvent('onkeydown', this._keypress.bind(this));

}

_reset: function() {

//this._inputObj.value = "";

this._inputObj.focus(); //IE 的一个Bug，不能自动聚焦

_keypress: function(evt) {

if (!evt) evt = window.event;

switch(evt.keyCode) {

case 27: this._close(); break; //Esc Key be press down

case 13: this._OKBtn.click(); break; //Enter Key be press down

default: break;

}

_getValue: function() {

return this._inputObj.value;

_fDragging: function(obj, evt, limit) {

if(!evt) evt = window.event;

var x = parseInt(obj.style.left);

var y = parseInt(obj.style.top);

var x_ = evt.clientX - x;

var y_ = evt.clientY - y;

if(document.addEventListener) {

document.addEventListener('mousemove', inFmove, true);

document.addEventListener('mouseup', inFup, true);

} else if(document.attachEvent) {

document.attachEvent('onmousemove', inFmove);

document.attachEvent('onmouseup', inFup);

}

inFstop(evt);

inFabort(evt);

function inFmove(evt) {

if (!evt) evt = window.event;

if (limit) {

var op = obj.parentNode;

var opX = parseInt(op.style.left);

var opY = parseInt(op.style.top);

if ((evt.clientX - x_) < 0) return false;

else if ((evt.clientX - x_ + obj.offsetWidth + opX) > (opX + op.offsetWidth)) return false;

if (evt.clientY - y_ < 0) return false;

else if ((evt.clientY - y_ + obj.offsetHeight + opY) > (opY + op.offsetHeight)) return false;

//status=e.clientY-y_;

}

obj.style.left = evt.clientX - x_ + 'px';

obj.style.top = evt.clientY - y_ + 'px';

inFstop(evt);

}

function inFup(evt) {

if (!evt) evt = window.event;

if (document.removeEventListener) {

document.removeEventListener('mousemove', inFmove, true);

document.removeEventListener('mouseup', inFup, true);

} else if (document.detachEvent) {

document.detachEvent('onmousemove', inFmove);

document.detachEvent('onmouseup', inFup);

}

inFstop(evt);

}

function inFstop(evt) {

if (evt.stopPropagation) return evt.stopPropagation();

else return evt.cancelBubble = true;

}

function inFabort(evt) {

if (evt.preventDefault) return evt.preventDefault();

else return evt.returnValue = false;

}

</script>

</head>

<body>

<a onclick="new CustomDlg('CustomDlg', OKTag.bind(this, '1', '2', '3'))" style="cursor:pointer">点击弹出自定义对话框</a>

</div>

<a onclick="new CustomDlg('CustomDlg', OKTag.bind(this, 'a', 'b', 'c'))" style="cursor:pointer">点击弹出自定义对话框</a>

</div>

<a onclick="new CustomDlg('CustomDlg', OKTag.bind(this, '你', '好', '吗'))" style="cursor:pointer">点击弹出自定义对话框</a>

<a name="abc" href="#abc">abcanchor</a>

</div>

<div class="TitleBar" id="CustomDlg_TitleBar">请输入标签<span id="CustomDlg_Close">X</span></div>

<p>标签与标签之间用空隔分割，单个标签不能超过30字符：</p>

<div>

</div>

</form>

</div>

#CustomDlg {

position:absolute;

background:#f1f1f1;

width:230px;

font-size:12px;

text-align:left;

border:1px solid #ccc;

}

#CustomDlg .TitleBar {

background:#369;

text-align:left;

text-indent:0.5em;

height: 20px;

line-height:20px;

color:#FFF;

-moz-user-select: none;

-khtml-user-select: none;

user-select: none;

}

#CustomDlg .TitleBar span {

float:right;

margin-top:-20px;

margin-right: 4px;

cursor: pointer;

display:block;

font-weight:bold;

font-family:Arial, Helvetica, sans-serif;

}

#CustomDlg form {

padding: 0px;

margin: 6px;

}

#CustomDlg .Content{ text-align:center;}

#CustomDlg .Content p{padding:5px 5px 2px 5px; margin: 0px; text-align:left;-moz-user-select: none;-khtml-user-select: none;user-select: none;}

#CustomDlg .Content .Input{width:210px; height:18px; line-height:18px;}

#CustomDlg .Btn {

margin: 2px 6px;

border-bottom: groove 1px #000000;

border-right: groove 1px #000000;

width: 64px;

height: 22px;

line-height: 18px;

cursor:pointer;

}

</style>

</body>

</html>

posted on 2008-01-18 16:44 MingIsMe 阅读(208) 评论(0) 编辑收藏所属分类: 02 Script/CSS

Samuel Learning

文章分类(203)

新闻分类(52)

.NET资源

Ajax

Java开源

Mobile

WEB资源

Workflow

其他连接

大牛人

开源软件

敏捷

数据库

未归类

经典框架

网络教程

著名站点

项目管理

最新评论

View Post

用层模拟对话框