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