moo弹出框 改进版 css外置 背景用图片 大小任意缩放 圆角 插入任意内容 自定义按钮 回车空格esc支持 滚动支持 动画开关
2009-07-30 08:21 贪婪的小猪 阅读(297) 评论(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 type="text/css">
body{
}
#b {
background: red;
width: 100px;
height: 1000px;
}
</style>
<style>
.alertBox{
position:absolute;z-index:1001;background:url(http://hiphotos.baidu.com/zjm1126/pic/item/04f8242f6ef5f4101e3089ca.jpeg) no-repeat 0 0;
margin:-144px 0 0 -181px;left:500px;top:500px;
}
.alertBox .alertBoxRight{
background:url(http://hiphotos.baidu.com/zjm1126/pic/item/04f8242f6ef5f4101e3089ca.jpeg) no-repeat right 0;
}
.alertBox .alertBoxLeftBottom{
background:url(http://hiphotos.baidu.com/zjm1126/pic/item/04f8242f6ef5f4101e3089ca.jpeg) no-repeat 0 bottom;
}
.alertBox .alertBoxRightBottom{
background:url(http://hiphotos.baidu.com/zjm1126/pic/item/04f8242f6ef5f4101e3089ca.jpeg) no-repeat right bottom;
}
.alertBox .alertBox_DivTop{
height:20px;padding:13px 0 0;background:#FFCD55;margin:0 10px
}
.alertBox .alertBox_title{
font-size:13px;margin-left:8px;font-weight:bold;overflow:hidden;
}
.alertBox .alertBox_DivBottom{
font-size:12px;padding:18px 18px 0;;background:#fff;
}
.alertBox .alertBox_mainPart{
overflow:hidden;width:355px;height:60px;
}
.alertBox .alertBox_buttonContainer{
text-align:right;overflow:hidden;
}
.alertBox .alertBox_confirm{
background:#96A7AF;font-size:12px;border:1px solid #757575;width:54px;height:23px;color:#fff;padding:4px 13px 5px;font-weight:bold;
}
.alertBox .alertBox_cancel{
background:#96A7AF;font-size:12px;border:1px solid #757575;width:54px;height:23px;color:#fff;padding:4px 13px 5px;font-weight:bold;
}
.alertBox .alertBox_End{
margin:0 10px;height:10px;background:#fff;
}
.alertBox_maskLayer{
position:absolute; top:0px; left:0px; background:#777;opacity:0.3;filter:alpha(opacity=30);z-index:1000;
}
</style>
<script>
var Hi_Xiaoma_alertBox = new Class({
Implements: [Events, Options],
options: {
onConfirm: function(){
alert("ssss")
},
onCancel:$empty,
title: '系统提示', //弹出框标题
mainPartText: '系统保存成功', //弹出框主题内容
has_ConfirmButton: true, //是否含有确定键
has_CancelButton: true, //是否含有取消键
has_MaskLayer: true, //是否含有遮罩层
maskLayer_Transparent: false,//遮罩层是否透明
insertDom:'',//插入的dom
userDefined_button:'',//自定义按钮
animationSwitch:false,//动画开关
width:'',//对话框宽度
height:'',//对话框高度
styleClassName:''//改变对话框样式时的类名
},
initialize: function(options){
this.setOptions(options);
this.dom_alertBox();
this.add_alertBox();
this.setPosition();
this.add_alertBoxEvents();
},
//html转换成dom
dom_alertBox: function(){
this.alertBoxStr = '\
<div class="alertBox">\
<div class="alertBoxRight">\
<div class="alertBoxLeftBottom">\
<div class="alertBoxRightBottom">\
<div class="alertBox_DivTop">\
<div class="alertBox_title">{title}</div>\
</div>\
<div class="alertBox_DivBottom">\
<div class="alertBox_mainPart">{mainPartText}</div>\
<div class="alertBox_buttonContainer">\
<input type="button" class="alertBox_confirm" value="确定"/>\
<input type="button" class="alertBox_cancel" value="取消"/>\
</div>\
</div>\
<div class="alertBox_End"></div>\
<div class="alertBox_maskLayer"></div>\
</div>\
</div>\
</div>\
</div>';
this.alertBoxStr = this.alertBoxStr.substitute(this.options);
var div1 = new Element('div');
div1.innerHTML = this.alertBoxStr;
this.alertBox = div1.getFirst();
this.maskLayer = this.alertBox.getElements('.alertBox_maskLayer')[0];
this.alertBox_mainPart = this.alertBox.getElements('.alertBox_mainPart')[0];
this.alertBox_buttonContainer = this.alertBox.getElements('.alertBox_buttonContainer')[0];
this.alertBox_confirm = this.alertBox.getElements('.alertBox_confirm')[0];
this.alertBox_cancel = this.alertBox.getElements('.alertBox_cancel')[0];
},
//设置位置
setPosition: function(){
if(this.options.styleClassName)this.alertBox.set('class',this.options.styleClassName);
if(this.options.width)this.alertBox_mainPart.style.width=this.options.width.toInt()+'px';
if(this.options.height)this.alertBox_mainPart.style.height=this.options.height.toInt()+'px';
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';
if (this.options.animationSwitch){
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 =Math.max(window.getScrollSize().y,800) + 'px';
var alertBox = this.alertBox;
var maskLayer=this.maskLayer
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';
maskLayer.style.height =Math.max(window.getScrollSize().y,800) + 'px';
maskLayer.style.width = window.getScrollSize().x + 'px';
}
})
},
//添加到body
add_alertBox: function(){
document.body.appendChild(this.alertBox);
document.body.appendChild(this.maskLayer)
if (!this.options.has_MaskLayer)
this.alertBox_maskLayer.display = "none";
else if (this.options.maskLayer_Transparent)
this.alertBox_maskLayer.setOpacity(0);
if (this.options.has_ConfirmButton)
this.alertBox_confirm.display = "none";
if (this.options.has_CancelButton)
this.alertBox_cancel.display = "none";
var insertDom=this.options.insertDom;
if(insertDom){
var alertBox_mainPart=this.alertBox_mainPart;
if ($type(insertDom) == 'string') {
alertBox_mainPart.innerHTML = insertDom;
}
else {
alertBox_mainPart.innerHTML = '';
alertBox_mainPart.adopt(insertDom);
}
}
var userDefined_button=this.options.userDefined_button;
if(userDefined_button){
var alertBox_buttonContainer=this.alertBox_buttonContainer;
if ($type(userDefined_button) == 'string') {
var div = new Element('div');
div.innerHTML = userDefined_button;
alertBox_buttonContainer.adopt(div.getChildren());
}
else {
alertBox_buttonContainer.adopt(userDefined_button);
}
}
},
//添加事件
add_alertBoxEvents: function(){
var self = this;
this.alertBox_confirm.addEvents({
click: function(){
self.fireEvent('confirm');
}
})
this.alertBox_cancel.addEvents({
click: function(){
var cancel=function(){
self.alertBox.destroy();
self.maskLayer.destroy();
}
if(!self.$events['cancel'])cancel();
else self.fireEvent('cancel',cancel);
//移除document的keydown事件
var fn=document.retrieve('events')['keydown']['keys'][0]
document.removeEvent('keydown',fn)
}
})
document.addEvents({
keydown: function(e){
if (e.key == 'esc') {
self.triggerClick(self.alertBox_cancel)
}
if (e.key == 'enter'||e.key == 'space') {
self.triggerClick(self.alertBox_confirm)
}
}
})
},
//定义不同浏览器下的触发click函数
triggerClick:function(someone){
if (document.all)
someone.click();
else {
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", true, true);
someone.dispatchEvent(evt);
}
}
})
new Hi_Xiaoma_alertBox({
width:40,
height:50
})
</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 type="text/css">
body{
}
#b {
background: red;
width: 100px;
height: 1000px;
}
</style>
<style>
.alertBox{
position:absolute;z-index:1001;background:url(http://hiphotos.baidu.com/zjm1126/pic/item/04f8242f6ef5f4101e3089ca.jpeg) no-repeat 0 0;
margin:-144px 0 0 -181px;left:500px;top:500px;
}
.alertBox .alertBoxRight{
background:url(http://hiphotos.baidu.com/zjm1126/pic/item/04f8242f6ef5f4101e3089ca.jpeg) no-repeat right 0;
}
.alertBox .alertBoxLeftBottom{
background:url(http://hiphotos.baidu.com/zjm1126/pic/item/04f8242f6ef5f4101e3089ca.jpeg) no-repeat 0 bottom;
}
.alertBox .alertBoxRightBottom{
background:url(http://hiphotos.baidu.com/zjm1126/pic/item/04f8242f6ef5f4101e3089ca.jpeg) no-repeat right bottom;
}
.alertBox .alertBox_DivTop{
height:20px;padding:13px 0 0;background:#FFCD55;margin:0 10px
}
.alertBox .alertBox_title{
font-size:13px;margin-left:8px;font-weight:bold;overflow:hidden;
}
.alertBox .alertBox_DivBottom{
font-size:12px;padding:18px 18px 0;;background:#fff;
}
.alertBox .alertBox_mainPart{
overflow:hidden;width:355px;height:60px;
}
.alertBox .alertBox_buttonContainer{
text-align:right;overflow:hidden;
}
.alertBox .alertBox_confirm{
background:#96A7AF;font-size:12px;border:1px solid #757575;width:54px;height:23px;color:#fff;padding:4px 13px 5px;font-weight:bold;
}
.alertBox .alertBox_cancel{
background:#96A7AF;font-size:12px;border:1px solid #757575;width:54px;height:23px;color:#fff;padding:4px 13px 5px;font-weight:bold;
}
.alertBox .alertBox_End{
margin:0 10px;height:10px;background:#fff;
}
.alertBox_maskLayer{
position:absolute; top:0px; left:0px; background:#777;opacity:0.3;filter:alpha(opacity=30);z-index:1000;
}
</style>
<script>
var Hi_Xiaoma_alertBox = new Class({
Implements: [Events, Options],
options: {
onConfirm: function(){
alert("ssss")
},
onCancel:$empty,
title: '系统提示', //弹出框标题
mainPartText: '系统保存成功', //弹出框主题内容
has_ConfirmButton: true, //是否含有确定键
has_CancelButton: true, //是否含有取消键
has_MaskLayer: true, //是否含有遮罩层
maskLayer_Transparent: false,//遮罩层是否透明
insertDom:'',//插入的dom
userDefined_button:'',//自定义按钮
animationSwitch:false,//动画开关
width:'',//对话框宽度
height:'',//对话框高度
styleClassName:''//改变对话框样式时的类名
},
initialize: function(options){
this.setOptions(options);
this.dom_alertBox();
this.add_alertBox();
this.setPosition();
this.add_alertBoxEvents();
},
//html转换成dom
dom_alertBox: function(){
this.alertBoxStr = '\
<div class="alertBox">\
<div class="alertBoxRight">\
<div class="alertBoxLeftBottom">\
<div class="alertBoxRightBottom">\
<div class="alertBox_DivTop">\
<div class="alertBox_title">{title}</div>\
</div>\
<div class="alertBox_DivBottom">\
<div class="alertBox_mainPart">{mainPartText}</div>\
<div class="alertBox_buttonContainer">\
<input type="button" class="alertBox_confirm" value="确定"/>\
<input type="button" class="alertBox_cancel" value="取消"/>\
</div>\
</div>\
<div class="alertBox_End"></div>\
<div class="alertBox_maskLayer"></div>\
</div>\
</div>\
</div>\
</div>';
this.alertBoxStr = this.alertBoxStr.substitute(this.options);
var div1 = new Element('div');
div1.innerHTML = this.alertBoxStr;
this.alertBox = div1.getFirst();
this.maskLayer = this.alertBox.getElements('.alertBox_maskLayer')[0];
this.alertBox_mainPart = this.alertBox.getElements('.alertBox_mainPart')[0];
this.alertBox_buttonContainer = this.alertBox.getElements('.alertBox_buttonContainer')[0];
this.alertBox_confirm = this.alertBox.getElements('.alertBox_confirm')[0];
this.alertBox_cancel = this.alertBox.getElements('.alertBox_cancel')[0];
},
//设置位置
setPosition: function(){
if(this.options.styleClassName)this.alertBox.set('class',this.options.styleClassName);
if(this.options.width)this.alertBox_mainPart.style.width=this.options.width.toInt()+'px';
if(this.options.height)this.alertBox_mainPart.style.height=this.options.height.toInt()+'px';
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';
if (this.options.animationSwitch){
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 =Math.max(window.getScrollSize().y,800) + 'px';
var alertBox = this.alertBox;
var maskLayer=this.maskLayer
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';
maskLayer.style.height =Math.max(window.getScrollSize().y,800) + 'px';
maskLayer.style.width = window.getScrollSize().x + 'px';
}
})
},
//添加到body
add_alertBox: function(){
document.body.appendChild(this.alertBox);
document.body.appendChild(this.maskLayer)
if (!this.options.has_MaskLayer)
this.alertBox_maskLayer.display = "none";
else if (this.options.maskLayer_Transparent)
this.alertBox_maskLayer.setOpacity(0);
if (this.options.has_ConfirmButton)
this.alertBox_confirm.display = "none";
if (this.options.has_CancelButton)
this.alertBox_cancel.display = "none";
var insertDom=this.options.insertDom;
if(insertDom){
var alertBox_mainPart=this.alertBox_mainPart;
if ($type(insertDom) == 'string') {
alertBox_mainPart.innerHTML = insertDom;
}
else {
alertBox_mainPart.innerHTML = '';
alertBox_mainPart.adopt(insertDom);
}
}
var userDefined_button=this.options.userDefined_button;
if(userDefined_button){
var alertBox_buttonContainer=this.alertBox_buttonContainer;
if ($type(userDefined_button) == 'string') {
var div = new Element('div');
div.innerHTML = userDefined_button;
alertBox_buttonContainer.adopt(div.getChildren());
}
else {
alertBox_buttonContainer.adopt(userDefined_button);
}
}
},
//添加事件
add_alertBoxEvents: function(){
var self = this;
this.alertBox_confirm.addEvents({
click: function(){
self.fireEvent('confirm');
}
})
this.alertBox_cancel.addEvents({
click: function(){
var cancel=function(){
self.alertBox.destroy();
self.maskLayer.destroy();
}
if(!self.$events['cancel'])cancel();
else self.fireEvent('cancel',cancel);
//移除document的keydown事件
var fn=document.retrieve('events')['keydown']['keys'][0]
document.removeEvent('keydown',fn)
}
})
document.addEvents({
keydown: function(e){
if (e.key == 'esc') {
self.triggerClick(self.alertBox_cancel)
}
if (e.key == 'enter'||e.key == 'space') {
self.triggerClick(self.alertBox_confirm)
}
}
})
},
//定义不同浏览器下的触发click函数
triggerClick:function(someone){
if (document.all)
someone.click();
else {
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", true, true);
someone.dispatchEvent(evt);
}
}
})
new Hi_Xiaoma_alertBox({
width:40,
height:50
})
</script>
</body>
</html>
