自己写的mootools弹出框效果 没用css和背景图片
2009-07-27 13:22 贪婪的小猪 阅读(639) 评论(0) 编辑 收藏 举报
!--
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
!--
<script type="text/javascript" src="http://mootools.net/download/get/mootools-1.2.3-core-yc.js">
</script>
<!--<script type="text/javascript" src="../mootools-1.2.3.1-more.js">
</script>-->
</head>
<body>
<style>
</style>
<style type="text/css">
body{
}
#b{
background:red;width:100px;height:1000px;
}
</style>
<p id=b></p>
<p id=b></p>
<script>
var Hi_Xiaoma_alertBox = new Class({
Implements: [Events, Options],
options: {
/*
onStart: $empty,
onCancel: $empty,
onComplete: $empty,
*/
onConfirm:function(){
alert("ssss")
},
onCancel:function(){
},
title:'系统提示', //弹出框标题
mainPartText:'系统保存成功', //弹出框主题内容
has_ConfirmButton:true, //是否含有确定键
has_CancelButton:true, //是否含有取消键
has_MaskLayer:true, //是否含有遮罩层
maskLayer_Transparent:false,//遮罩层是否透明
},
initialize: function(options){
if(window.alertBoxCount)return;
window.alertBoxCount=1;
this.subject=this;
this.setOptions(options);
this.dom_alertBox();
this.add_alertBox();
this.setPosition();
this.add_alertBoxEvents();
},
dom_alertBox:function(){
this.alertBoxStr='\
<div id="alertBox" style="width:392px;height:144px;position:absolute;display:none;\
z-index:1001;margin:-144px 0 0 -181px;">\
<div class="t1" style="background:#FFCD55;width:382px;margin:0 5px;height:1px;"></div>\
<div class="t2" style="background:#FFCD55;width:386px;margin:0 3px;height:1px;"></div>\
<div class="t3" style="background:#FFCD55;width:388px;margin:0 2px;height:1px;"></div>\
<div class="t4" style="background:#FFCD55;width:390px;margin:0 1px;height:2px;"></div>\
<!---->\
<div style="background:#FFCD55;height:28px;">\
<b id="alertBox_title" style="font-size:13px;margin-left:20px;">{title}</b>\
</div>\
<div style="background:#FFF;height:66px;padding:20px;font-size:12px">\
<div id="alertBox_mainPart"style="height:58px;">{mainPartText}</div>\
<div id="alertBox_buttonContainer" style="text-align:right;">\
<input type="button" id="alertBox_confirm" value="确定" style="background:#96A7AF;font-size:12px;\
border:1px solid #757575;width:54px;height:23px;color:#fff;padding:4px 13px 5px;font-weight:bold;"/>\
<input type="button" id="alertBox_cancel" value="取消" style="background:#96A7AF;font-size:12px;\
border:1px solid #757575;width:54px;height:23px;color:#fff;padding:4px 13px 5px;font-weight:bold;"/>\
</div>\
</div>\
<!---->\
<div class="b4" style="background:#fff;width:390px;margin:0 1px;height:2px;"></div>\
<div class="b3" style="background:#fff;width:388px;margin:0 2px;height:1px;"></div>\
<div class="b2" style="background:#fff;width:386px;margin:0 3px;height:1px;"></div>\
<div class="b1" style="background:#fff;width:382px;margin:0 5px;height:1px;"></div>\
</div>';
this.alertBoxStr=this.alertBoxStr.substitute(this.options);
var div1=new Element('div');div1.innerHTML=this.alertBoxStr;
this.alertBox=div1.getFirst();
this.maskLayerStr='\
<div id="alertBox_maskLayer" style="position:absolute; top:0px; left:0px; background:#777;opacity:0.3;\
filter:alpha(opacity=30);z-index:1000;">\
</div>';
var div2=new Element('div');div2.innerHTML=this.maskLayerStr;
this.maskLayer=div2.getFirst();
},
setPosition:function(){
var left=1/2*window.getSize().x+'px';
var top=1/2*window.getSize().y+'px';
this.alertBox.style.left=1/2*window.getSize().x+'px';
this.alertBox.style.top=1/2*window.getSize().y+'px';
var a=new Fx.Tween(this.alertBox);
a.start('top',((top.toInt()+200)+'px'),top);
var b=new Fx.Tween(this.alertBox);
b.start('opacity',0,1);
this.alertBox.style.display="";
this.maskLayer.style.width=window.getScrollSize().x+'px';
this.maskLayer.style.height=window.getScrollSize().y+'px';
var alertBox=this.alertBox;
window.addEvents({
scroll:function(){
alertBox.style.left=1/2*window.getSize().x+window.getScrollLeft()+'px';
alertBox.style.top=1/2*window.getSize().y+window.getScrollTop()+'px';
}
})
},
add_alertBox:function(){
document.body.appendChild(this.alertBox);
document.body.appendChild(this.maskLayer)
if(!this.options.has_MaskLayer)alertBox_maskLayer.display="none";
else if(this.options.maskLayer_Transparent)$('alertBox_maskLayer').setOpacity(0);
if(this.options.has_ConfirmButton)$('alertBox_confirm').display="none";
if(this.options.has_CancelButton)$('alertBox_cancel').display="none";
},
add_alertBoxEvents:function(){
var self=this;
this.alertBox.getElements('#alertBox_confirm').addEvents({
click:function(){
self.fireEvent('confirm');
}
})
this.alertBox.getElements('#alertBox_cancel').addEvents({
click:function(){
self.alertBox.destroy();
self.maskLayer.destroy();
window.alertBoxCount=0;
self.fireEvent('cancel');
}
})
document.addEvents({
keydown:function(e){
if(e.key=='esc'){
self.alertBox.destroy();
self.maskLayer.destroy();
window.alertBoxCount=0;
self.fireEvent('cancel');
}
if(e.key=='enter'){
}
}
})
}
})
new Hi_Xiaoma_alertBox();
</script>
</body>
</html>
Code<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
!--
<script type="text/javascript" src="http://mootools.net/download/get/mootools-1.2.3-core-yc.js">
</script>
<!--<script type="text/javascript" src="../mootools-1.2.3.1-more.js">
</script>-->
</head>
<body>
<style>
</style>
<style type="text/css">
body{
}
#b{
background:red;width:100px;height:1000px;
}
</style>
<p id=b></p>
<p id=b></p>
<script>
var Hi_Xiaoma_alertBox = new Class({
Implements: [Events, Options],
options: {
/*
onStart: $empty,
onCancel: $empty,
onComplete: $empty,
*/
onConfirm:function(){
alert("ssss")
},
onCancel:function(){
},
title:'系统提示', //弹出框标题
mainPartText:'系统保存成功', //弹出框主题内容
has_ConfirmButton:true, //是否含有确定键
has_CancelButton:true, //是否含有取消键
has_MaskLayer:true, //是否含有遮罩层
maskLayer_Transparent:false,//遮罩层是否透明
},
initialize: function(options){
if(window.alertBoxCount)return;
window.alertBoxCount=1;
this.subject=this;
this.setOptions(options);
this.dom_alertBox();
this.add_alertBox();
this.setPosition();
this.add_alertBoxEvents();
},
dom_alertBox:function(){
this.alertBoxStr='\
<div id="alertBox" style="width:392px;height:144px;position:absolute;display:none;\
z-index:1001;margin:-144px 0 0 -181px;">\
<div class="t1" style="background:#FFCD55;width:382px;margin:0 5px;height:1px;"></div>\
<div class="t2" style="background:#FFCD55;width:386px;margin:0 3px;height:1px;"></div>\
<div class="t3" style="background:#FFCD55;width:388px;margin:0 2px;height:1px;"></div>\
<div class="t4" style="background:#FFCD55;width:390px;margin:0 1px;height:2px;"></div>\
<!---->\
<div style="background:#FFCD55;height:28px;">\
<b id="alertBox_title" style="font-size:13px;margin-left:20px;">{title}</b>\
</div>\
<div style="background:#FFF;height:66px;padding:20px;font-size:12px">\
<div id="alertBox_mainPart"style="height:58px;">{mainPartText}</div>\
<div id="alertBox_buttonContainer" style="text-align:right;">\
<input type="button" id="alertBox_confirm" value="确定" style="background:#96A7AF;font-size:12px;\
border:1px solid #757575;width:54px;height:23px;color:#fff;padding:4px 13px 5px;font-weight:bold;"/>\
<input type="button" id="alertBox_cancel" value="取消" style="background:#96A7AF;font-size:12px;\
border:1px solid #757575;width:54px;height:23px;color:#fff;padding:4px 13px 5px;font-weight:bold;"/>\
</div>\
</div>\
<!---->\
<div class="b4" style="background:#fff;width:390px;margin:0 1px;height:2px;"></div>\
<div class="b3" style="background:#fff;width:388px;margin:0 2px;height:1px;"></div>\
<div class="b2" style="background:#fff;width:386px;margin:0 3px;height:1px;"></div>\
<div class="b1" style="background:#fff;width:382px;margin:0 5px;height:1px;"></div>\
</div>';
this.alertBoxStr=this.alertBoxStr.substitute(this.options);
var div1=new Element('div');div1.innerHTML=this.alertBoxStr;
this.alertBox=div1.getFirst();
this.maskLayerStr='\
<div id="alertBox_maskLayer" style="position:absolute; top:0px; left:0px; background:#777;opacity:0.3;\
filter:alpha(opacity=30);z-index:1000;">\
</div>';
var div2=new Element('div');div2.innerHTML=this.maskLayerStr;
this.maskLayer=div2.getFirst();
},
setPosition:function(){
var left=1/2*window.getSize().x+'px';
var top=1/2*window.getSize().y+'px';
this.alertBox.style.left=1/2*window.getSize().x+'px';
this.alertBox.style.top=1/2*window.getSize().y+'px';
var a=new Fx.Tween(this.alertBox);
a.start('top',((top.toInt()+200)+'px'),top);
var b=new Fx.Tween(this.alertBox);
b.start('opacity',0,1);
this.alertBox.style.display="";
this.maskLayer.style.width=window.getScrollSize().x+'px';
this.maskLayer.style.height=window.getScrollSize().y+'px';
var alertBox=this.alertBox;
window.addEvents({
scroll:function(){
alertBox.style.left=1/2*window.getSize().x+window.getScrollLeft()+'px';
alertBox.style.top=1/2*window.getSize().y+window.getScrollTop()+'px';
}
})
},
add_alertBox:function(){
document.body.appendChild(this.alertBox);
document.body.appendChild(this.maskLayer)
if(!this.options.has_MaskLayer)alertBox_maskLayer.display="none";
else if(this.options.maskLayer_Transparent)$('alertBox_maskLayer').setOpacity(0);
if(this.options.has_ConfirmButton)$('alertBox_confirm').display="none";
if(this.options.has_CancelButton)$('alertBox_cancel').display="none";
},
add_alertBoxEvents:function(){
var self=this;
this.alertBox.getElements('#alertBox_confirm').addEvents({
click:function(){
self.fireEvent('confirm');
}
})
this.alertBox.getElements('#alertBox_cancel').addEvents({
click:function(){
self.alertBox.destroy();
self.maskLayer.destroy();
window.alertBoxCount=0;
self.fireEvent('cancel');
}
})
document.addEvents({
keydown:function(e){
if(e.key=='esc'){
self.alertBox.destroy();
self.maskLayer.destroy();
window.alertBoxCount=0;
self.fireEvent('cancel');
}
if(e.key=='enter'){
}
}
})
}
})
new Hi_Xiaoma_alertBox();
</script>
</body>
</html>
