JS模擬Alert與Confirm對話框

時間 2019-12-13

原文原文鏈接

這2個例子都是用原生JS寫的，主要是用JS拼接了界面，並未作過多的事件監聽。，樣式用了Css3的一些特性。javascript

調用方式則爲：css

 //Alert
 Alert.show('我警告你哦~');

 //Confirm
 Confirm.show('我是確認對話框',function(){
      doSomething();
 });

組件詳情看下面的具體代碼：html

1.CSS樣式java

因爲這2個組件的樣式差很少，所用共用了同樣的css，樣式代碼以下：git

/**
 *     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.Alertgithub

Alert 主要是模擬了界面，並顯示提示信息。JS代碼.Demo 可查看：http://wewoor.github.io/CNUI/document.html 。web

//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 組件app

confirm對話框並無像原生的confirm組件返回true 或者false，而是點擊確認按鈕後執行了傳入的回調函數，點擊取消按鈕則移除了這個組件。demo請看：http://wewoor.github.io/CNUI/document.htmlide

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。