一个分享个人学习、开发经验的Blog,http://www.joyphper.net

基于Jquery1.4.4的弹出提示框效果

posted @ 2011-04-25 10:56 | 阅读:4407 | 评论:0 | 分类: Javascript

基于Jquery1.4.4的弹出提示框效果

javascript代码如下:

 

$(document).ready(  
    function()  
    {  
        $(window).scroll(  
            function()  
            {  
                $('#remmindBox').css('top',($(window).scrollTop()+$(window).height()/6) + 'px')  
            }  
        );  
    }  
);  
$('#boxClose').live('click',function(){boxClose();});  
function getRemind(boxName)  
{  
    $('body').append('<div id="reLockbg"></div>');//页面元素锁定  
    $('body').append('<div id="remmindBox"></div>');  
    $('#remmindBox').append('<div id="boxTop"><span id="boxName">'+boxName+'</span><a title="关闭" href="javascript:void()" id="boxClose">X</a></div>');  
    $('#remmindBox').append('<div id="boxData"></div>');  
    setCss();//初始化样式  
}  
//初始化样式  
function setCss()  
{  
    //锁定背景样式  
    $('#reLockbg').css({'background-color':'#666','width':'100%','left':'0','top':'0','filter':'alpha(opacity=50)','opacity':'0.5','z-index':'1','position':'fixed!important','position':'absolute','height':$(document).height()+'px'});  
    //提示框样式  
    $('#remmindBox').css({'width':'30%','border':'none','left':'35%','background':'#fff','position':'absolute','z-index':'101','text-align':'left','top':$(window).height()/6 + 'px'});  
    //顶部导航样式  
    $('#boxTop').css({'height':'30px','background':'#eee'});  
    //跳框标题样式  
    $('#boxName').css({'float':'left','font-size':'14px','font-weight':'800','line-height':'30px','color':'#333','margin-left':'10px'});  
    //关闭按键样式  
    $('#boxClose').css({'float':'right','line-height':'30px','color':'#333','text-decoration':'none','padding':'0 10px'})  
    //数据框样式  
    $('#boxData').css({'font-size':'12px','margin':'10px'});  
}  
//关闭按钮鼠标事件  
$('#boxClose').live('mouseover',function(){$(this).css('color','red')});  
$('#boxClose').live('mouseout',function(){$(this).css('color','#333')});  
 
function boxClose()  
{  
    $('#reLockbg').remove();  
    $('#remmindBox').remove();  
} 

 

附件下载:

地址1:upload/201104/2011042510540679.rar

地址2:http://download.csdn.net/source/3223734

演示地址:http://www.joyphper.net/demo/remindBox/

展示效果为:

TAG: jQuery , 提示框

共有0条评论 发表评论>>

点击换一张验证码