【原创】使用blockUI制作自定义的漂亮的网页提示框(代替confirm和alert)

一、介绍blockUI

    它是Jquery框架的一个插件,专门用来做提示框、模态窗口的

    地址:http://www.malsup.com/jquery/block/

    具体的使用方法和demo里面都写得很清楚,我不再一一陈述

二、重写javascript中的alert,使得所有调用alert的地方都有统一的样式

        这里我提供一个js文件

        

$.blockUI.defaults.overlayCSS.backgroundColor="#d5d5d5";
$.blockUI.defaults.pageMessageCSS.border
="none";
//$.blockUI.defaults.pageMessageCSS.backgroundColor="#D6D6D6";
$.blockUI.defaults.pageMessageCSS.margin="-50px 0 0 -200px";
$.blockUI.defaults.pageMessageCSS.width
="400px";
$.blockUI.defaults.overlayCSS.cursor
='normal';
function Confirmer(title,message,callback,callback1,txt1,txt2){
    
    
if(!txt1){
        txt1 
= "确定";
    }
    
    
if(!txt2){
        txt2 
= "取消";
    }

    
var dhtml="";
    dhtml
+="<div class='DialogContainer'>";
    dhtml
+="    <div class='Title'>"+title+"</div>";
    dhtml
+="    <div class='Content'>"+message+"</div>"
    dhtml
+="    <div class='buttons'>";
    dhtml
+="        <input type='button' value='"+txt1+"' id='btn_Confirmer_OK'/>"
    dhtml
+="        <input type='button' value='"+txt2+"' id='btn_Confirmer_CANCEL'/>"
    dhtml
+="    </div>"
    dhtml
+="</div>";

    $.blockUI(dhtml);
    $(
"#btn_Confirmer_OK").click(function(){
       
        $.unblockUI();
            setTimeout(
function(){
                $(callback);
            },
500);
    });
    
    $(
"#btn_Confirmer_CANCEL").click(function(){
        $.unblockUI();
        
if(callback1){
            $(callback1);
        }
    });
}

function Alert(message,callback){
    
    
var dhtml="";
    dhtml
+="<div class='DialogContainer'>";
    dhtml
+="    <div class='Title'>消息框</div>";
    dhtml
+="    <div class='Content'>"+message+"</div>"
    dhtml
+="    <div class='buttons'>";
    dhtml
+="        <input type='button' value='确定' id='btn_alert_Ok' />"
    
    dhtml
+="    </div>"
    dhtml
+="</div>";
    $.extend($.blockUI.defaults.pageMessageCSS, { border:
'solid 1px #7199b1'});
    $.blockUI(dhtml);
      $(
"#btn_alert_Ok").focus();
    $(
"#btn_alert_Ok").click(function(){
        
        $.unblockUI();    
        setTimeout(
function(){
            eval(callback);
        },
500);
    });        

    
}

这里我故意把alert改为了大写的Alert,因为我觉得如果重写以前的alert方法,调试不太方便


三、在页面调用的时候需要引用的资源文件
    <link href="/css/DialogUI.css" rel="stylesheet" type="text/css" />
    
<script type="text/javascript" src="/js/blockUI.js" ></script>
    
<script type="text/javascript" src="/js/commondialog.js" charset="gb2312"></script>

别忘了还需要引用jquery,因为blockUI是jqery的插件里面用到它的一些方法
<script src="/js/jquery-1.2.1.js" type="text/javascript"></script>

四、分析css文件
div.blockUI{
    border
:1px solid red;
    background-color
:#335577;
}
//整体的DIV层样式


.DialogContainer
{
    width
:400px;
    height
:200px;
    cursor
:default;
    
}
//提示框里面的样式


.DialogContainer .Title
{
    background-color
:#7199b1;
    color
:white;
    font
:caption;
    text-align
:left;
    padding-top
:3px;
    padding-bottom
:3px;
    padding-left
:5px;
}
//标题样式


.DialogContainer .Content
{
    font-size
:12px;
    line-height
:25px;
    height
:160px;
    padding-top
:20px;
    padding-left
:15px;
    text-align
:left;
}
//内容样式


.DialogContainer .buttons
{
    text-align
:right;
    padding-right
:20px;
    padding-bottom
:10px;
}
//按钮样式


.DialogContainer .buttons input
{
    margin-left
:20px;
    text-align
:center;
    background-color
: #ffffff;
    border-right
: #7199b1 2px solid;
    padding-right
: 8px;
    border-top
: #7499ae 1px solid;
    padding-left
: 8px;
    font-size
: 14px;
    background-image
: url(../images/anniu/out.gif);
    border-left
: #7499ae 1px solid;
    cursor
: hand;
    color
: #053152;
    padding-top
: 5px;
    padding-bottom
: 0px;
    border-bottom
: #7199b1 2px solid;
}

怎么样,是不是很简单啊,回头我做一个demo放上来!请大家共同研究!
posted @ 2008-03-11 11:00  PointNet  阅读(11614)  评论(14编辑  收藏  举报