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:;
    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();
        }
    }