JS 模拟 Alert 与 Confirm 对话框
这 2 个例子都是用原生 JS 写的，主要是用 JS 拼接了界面，并未做过多的事件监听。，样式用了 Css3 的一些特性。
调用方式则为：
//Alert
Alert.show('我警告你哦~');
//Confirm
Confirm.show('我是确认对话框',function(){
doSomething();
});
组件详情看下面的具体代码：
1.CSS 样式
由于这 2 个组件的样式差不多，所用共用了一样的 css，样式代码如下：
/**
* dialog
*/
.dialog {
top:40%;
left:40%;
width: 250px;
min-height: 100px;
position:fixed;
z-index:9999;
text-align: center;
padding:10px;
border:solid #bcc5c1 1px;
background:#FFF;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
padding:0px;
behavior: url(PIE.htc);
}
.dialog .dialog-header {
position:relative;
width:100%;
height:30px;
margin:0px;
background:#0CF;
background:linear-gradient(top,#d1d4d3 0%,#c4c7c8 100%);
background:-webkit-linear-gradient(top,#d1d4d3 0%,#c4c7c8 100%);
background:-moz-linear-gradient(top,#d1d4d3 0%,#c4c7c8 100%);
border-radius:3px 3px 0px 0px;
-moz-border-radius:3px 3px 0px 0px;
-webkit-border-radius:3px 3px 0px 0px;
behavior: url(PIE.htc);
}
.dialog-header .header-left {
width: auto;
height:auto;
float:left;
margin:7px;
}
.dialog-header .header-right {
width: auto;
height:auto;
float:right;
margin:7px;
}
.dialog .dialog-content {
font-size:14px;
height:100%;
width:96%;
float:left;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
color:#424242;
padding:5px;
}
.dialog-content .content-main {
width: 100%;
min-height: 40px;
line-height:25px;
float:left;
white-space: normal;
}
.dialog-content .content-btn {
float:left;
width:100%;
height:28px;
margin-top:10px;
}
.btn {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:center;
vertical-align:middle;
margin-right:5px;
padding:5px 20px 5px 20px;
text-decoration:none;
border:#c4c7c8 solid 1px;
border-radius:3px;
background:#d1d4d3;
background:linear-gradient(top,#d1d4d3 0%,#c4c7c8 100%);
background:-webkit-linear-gradient(top,#d1d4d3 0%,#c4c7c8 100%);
background:-moz-linear-gradient(top,#d1d4d3 0%,#c4c7c8 100%);
color:#111c24;
}
.btn:hover {
background:#d1d4d3;
background:linear-gradient(top,#c4c7c8 0%,#d1d4d3 100%);
background:-webkit-linear-gradient(top,#c4c7c8 0%,#d1d4d3 100%);
background:-moz-linear-gradient(top,#c4c7c8 0%,#d1d4d3 100%);
color:#111c24;
}
.alert-content {
text-align: left;
text-indent: 20px;
}
.alert {
margin-left:140px;
}
2.Alert
Alert 主要是模拟了界面，并显示提示信息。JS 代码.Demo 可查看：http://wewoor.github.io/CNUI/document.html 。
//Alert
var Alert = {
func : function(){},
name : "dialog",
show : function(msg){ //show function
var confirm = document.createElement("div");
confirm.className = this.name;
confirm.id = this.name;;
var confirmHeader = document.createElement("div");
confirmHeader.className = "dialog-header";
var headerSpan = document.createElement("span");
headerSpan.className = "dialog-title";
var confirmContent = document.createElement("div");
confirmContent.className = "dialog-content";
var contentSpan = document.createElement("span");
contentSpan.className = "content-main alert-content";
var contentBtnDiv = document.createElement("div");
contentBtnDiv.className="content-btn";
var btnConfirm = document.createElement("a"); //确认按钮
btnConfirm.href = "javascript:Alert.hide()";
btnConfirm.className = "btn alert";
//按钮添加
contentBtnDiv.appendChild(btnConfirm);
confirmContent.appendChild(contentSpan);
confirmContent.appendChild(contentBtnDiv);
confirmHeader.appendChild(headerSpan);
confirm.appendChild(confirmHeader);
confirm.appendChild(confirmContent);
//default button
headerSpan.innerHTML = "警示框！";
btnConfirm.innerHTML = "确认";
contentSpan.innerHTML = "这是一个警示框！";
if(msg != null && msg != undefined){
contentSpan.innerHTML = msg;
}
document.body.appendChild(confirm);
return confirm;
},
hide : function(){
var confirm = document.getElementById(this.name);
if(confirm != null && confirm != undefined){
document.body.removeChild(confirm);
}
}
}
3.Confirm 组件
confirm 对话框并没有像原生的 confirm 组件返回 true 或者 false，而是点击确认按钮后执行了传入的回调函数，点击取消按钮则移除了这个组件。demo 请看：http://wewoor.github.io/CNUI/document.html
//Confirm
var Confirm = {
func : function(){},
name : "dialog",
show : function(msg,call){ //show function
var confirm = document.createElement("div");
confirm.className = this.name;
confirm.id = this.name;;
var confirmHeader = document.createElement("div");
confirmHeader.className = "dialog-header";
var headerSpan = document.createElement("span");
headerSpan.className = "dialog-title";
var confirmContent = document.createElement("div");
confirmContent.className = "dialog-content";
var contentSpan = document.createElement("span");
contentSpan.className = "content-main";
var contentBtnDiv = document.createElement("div");
contentBtnDiv.className="content-btn";
var btnConfirm = document.createElement("a"); //确认按钮
btnConfirm.href = "javascript:Confirm.callback()";
btnConfirm.className = "btn";
var btnCancle = document.createElement("a"); //取消按钮
btnCancle.className = "btn";
btnCancle.href = "javascript:Confirm.hide()";
//按钮添加
contentBtnDiv.appendChild(btnConfirm);
contentBtnDiv.appendChild(btnCancle);
confirmContent.appendChild(contentSpan);
confirmContent.appendChild(contentBtnDiv);
confirmHeader.appendChild(headerSpan);
confirm.appendChild(confirmHeader);
confirm.appendChild(confirmContent);
//default style
headerSpan.innerHTML = "对话框";
contentSpan.innerHTML = "这是确认对话框？";
btnConfirm.innerHTML = "确认";
btnCancle.innerHTML = "取消";
//if the property html is not null and not undefined
//just set this property.
if(msg != undefined){
contentSpan.innerHTML = msg;
}
//set callback
if(call != null && call != undefined){
if(typeof(call) == "function"){
this.func = call;
}
}
document.body.appendChild(confirm);
return confirm;
},
hide : function(){
var confirm = document.getElementById(this.name);
if(confirm != null && confirm != undefined){
document.body.removeChild(confirm);
}
},
callback : function(){
//执行call回调方法
this.func();
//隐藏confirm对象
this.hide();
}
}
最后修改于 2013-06-09