自定義提示框（alert、confirm 可自定義標題 內容 圖標 取消按鈕）

聲明：本例子是基於自定義confirm對話框 做的修改

效果：

源代碼示例下載

 

 

【主函數】

1、msgbox(title,text,func,cancel,focus,icon)

參數說明：
  title     :彈出對話框的標題,標題內容最好在25個字符內,否則會導致顯示圖片的異常               
  text    :彈出對話框的內容,可以使用HTML代碼,例如<font color='red'>刪除么?</font>,如果直接帶入函數,注意轉義
  func    :彈出對話框點擊確認后執行的函數,需要寫全函數的引用,例如add(),如果直接帶入函數,注意轉義。
  cancel  :彈出對話框是否顯示取消按鈕,為空的話不顯示,為1時顯示
  focus  :彈出對話框焦點的位置,0焦點在確認按鈕上,1在取消按鈕上,為空時默認在確認按鈕上
  icon    :彈出對話框的圖標

 

<p>

<input onclick="msgbox('提示','請至少選擇一項需要刪除的記錄!','',null,0,'Warning')" type="button" value="提示" /> 

<input onclick="msgbox('提示','操作執行成功!','',null,0,'true')" type="button" value="操作成功" /> 

<input onclick="msgbox('提示','操作執行失敗!','',null,0,'error')" type="button" value="操作失敗" /> 

<input onclick="msgbox('確認刪除么?','點擊確認執行刪除操作,點擊取消不再執行操作!','msgbox(\'操作提示\',\'刪除成功!\',\'\',null,0,\'true\')',1,1,'Warning')" type="button" value="confirm" />

</p>

<script type="text/javascript" language="javascript">// <![CDATA[
function msgbox(title,content,func,cancel,focus,icon){
        /*        
        參數列表說明:
        title :彈出對話框的標題,標題內容最好在25個字符內,否則會導致顯示圖片的異常                                                            
        text  :彈出對話框的內容,可以使用HTML代碼,例如<font color='red'>刪除么?</font>,如果直接帶入函數,注意轉義
        func  :彈出對話框點擊確認后執行的函數,需要寫全函數的引用,例如add(),如果直接帶入函數,注意轉義。
        cancel:彈出對話框是否顯示取消按鈕,為空的話不顯示,為1時顯示
        focus :彈出對話框焦點的位置,0焦點在確認按鈕上,1在取消按鈕上,為空時默認在確認按鈕上
        icon  :彈出對話框的圖標
        Author:Jedliu
        Blog  :Jedliu.cublog.cn 
        【網頁轉載請保留版權信息,實際使用時可以除去該信息】
        */    
        icon="http://images.cnblogs.com/cnblogs_com/IT-Bear/365886/t_msgbox_"+icon+".png";
        create_mask();
        var temp="<div style=\"width:300px;border: 2px solid #37B6D1;background-color: #fff; font-weight: bold;font-size: 12px;\" >"
                +"<div style=\"line-height:25px; padding:0px 5px;    background-color: #37B6D1;\">"+title+"</div>"
                +"<table  cellspacing=\"0\" border=\"0\"><tr><td style=\" padding:0px 0px 0px 20px; \"><img src=\""+icon+"\" width=\"64\" height=\"64\"></td>"
                +"<td ><div style=\"background-color: #fff; font-weight: bold;font-size: 12px;padding:20px 0px ; text-align:left;\">"+content
                +"</div></td></tr></table>"
                +"<div style=\"text-align:center; padding:0px 0px 20px;background-color: #fff;\"><input type='button'  style=\"border:1px solid #CCC; background-color:#CCC; width:50px; height:25px;\" value='確定'id=\"msgconfirmb\"   onclick=\"remove();"+func+";\">";
        if(null!=cancel){temp+="   <input type='button' style=\"border:1px solid #CCC; background-color:#CCC; width:50px; height:25px;\" value='取消'  id=\"msgcancelb\"   onClick='remove()'>";}
        temp+="</div></div>";
        create_msgbox(400,200,temp);
        if(focus==0||focus=="0"||null==focus){document.getElementById("msgconfirmb").focus();}
        else if(focus==1||focus=="1"){document.getElementById("msgcancelb").focus();}            
    }
    function get_width(){
        return (document.body.clientWidth+document.body.scrollLeft);
    }
    function get_height(){
        return (document.body.clientHeight+document.body.scrollTop);
    }
    function get_left(w){
        var bw=document.body.clientWidth;
        var bh=document.body.clientHeight;
        w=parseFloat(w);
        return (bw/2-w/2+document.body.scrollLeft);
    }
    function get_top(h){
        var bw=document.body.clientWidth;
        var bh=document.body.clientHeight;
        h=parseFloat(h);
        return (bh/2-h/2+document.body.scrollTop);
    }
    function create_mask(){//創建遮罩層的函數
        var mask=document.createElement("div");
        mask.id="mask";
        mask.style.position="absolute";
        mask.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=4,opacity=25)";//IE的不透明設置
        mask.style.opacity=0.4;//Mozilla的不透明設置
        mask.style.background="black";
        mask.style.top="0px";
        mask.style.left="0px";
        mask.style.width=get_width();
        mask.style.height=get_height();
        mask.style.zIndex=1000;
        document.body.appendChild(mask);
    }
    function create_msgbox(w,h,t){//創建彈出對話框的函數
        var box=document.createElement("div")    ;
        box.id="msgbox";
        box.style.position="absolute";
        box.style.width=w;
        box.style.height=h;
        box.style.overflow="visible";
        box.innerHTML=t;
        box.style.zIndex=1001;
        document.body.appendChild(box);
        re_pos();
    }
    function re_mask(){
        /*
        更改遮罩層的大小,確保在滾動以及窗口大小改變時還可以覆蓋所有的內容
        */
        var mask=document.getElementById("mask")    ;
        if(null==mask)return;
        mask.style.width=get_width()+"px";
        mask.style.height=get_height()+"px";
    }
    function re_pos(){
        /*
        更改彈出對話框層的位置,確保在滾動以及窗口大小改變時一直保持在網頁的最中間
        */
        var box=document.getElementById("msgbox");
        if(null!=box){
            var w=box.style.width;
            var h=box.style.height;
            box.style.left=get_left(w)+"px";
            box.style.top=get_top(h)+"px";
        }
    }
    function remove(){
        /*
        清除遮罩層以及彈出的對話框
        */
        var mask=document.getElementById("mask");
        var msgbox=document.getElementById("msgbox");
        if(null==mask&&null==msgbox)return;
        document.body.removeChild(mask);
        document.body.removeChild(msgbox);
    }
    
    function re_show(){
        /*
        重新顯示遮罩層以及彈出窗口元素
        */
        re_pos();
        re_mask();    
    }
    function load_func(){
        /*
        加載函數,覆蓋window的onresize和onscroll函數
        */
        window.onresize=re_show;
        window.onscroll=re_show;    
    }
// ]]></script>

聲明：本例子是基於自定義confirm對話框 做的修改

源代碼示例下載