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

原文地址:http://www.cnblogs.com/goody9807/archive/2008/03/11/1100165.html


一、介绍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放上来!请大家共同研究!

你可能感兴趣的:(JavaScript,jquery,框架,css)