Erlo

自定义弹窗

2017-10-31 15:18:07   2019   Erlo.vip
页面报错/反馈
收藏 点赞

//alertLj('文本?',{ok:'确认文本',click:"javascript:alert('确认点击事件');alertLjClose()",cancel:true});

js部分

function alertLj(str,obj,ppobj){

    if($('.alertLjBox').size())$('.alertLjBox').remove();

    if(!obj)obj={};

    if(!obj.title)obj.title='系统提示';

    if(!obj.ok)obj.ok='确认';

    var pobj=ppobj?ppobj:$('body'),pwobj=ppobj?(ppobj.attr('class')?ppobj:$(window)):$(window);

    var load='',html,close='关闭',title='

'+obj.title+'
',sure=''+obj.ok+'',cancel='取消';

    var handle='

'+sure+cancel+'
';

    html='

'+str+'
';

    html='

'+close+title+html+handle+'
';

    html='

'+html+'
';

    var cssLeft='-'+pwobj.width()+'px',cssTop=0;

    pobj.append(html).find('.alertLj').css({left:cssLeft,top:cssTop});

    if(obj.click){

   $('.alertLj .alertSure').attr('onclick',obj.click);

    }else{

   $('.alertLj .alertSure').attr('onclick','alertLjClose()');

    }

    if(obj.noClose)$('.alertLj .alertClose').remove();

    if(!obj.cancel)$('.alertLj .alertCancel').remove();

    if(obj.cancel && obj.cancelClick)$('.alertLj .alertCancel').attr('onclick',obj.cancelClick);

    if(str=='load'){

   $('.alertLj').addClass('load').find('.alertBox').html(load);

   $('.alertLj .alertClose').remove();

    }

    cssLeft=(pwobj.width()-$(".alertLj").width())/2;

    cssTop=(pwobj.height()-$(".alertLj").height())/2.5+pwobj.scrollTop();

    $('.alertLj').css({left:cssLeft,top:cssTop},300).fadeIn(300);

    $('.alertLjBox').height($(document).height());

}

function alertLjClose(fun){

    $('.alertLjBox').fadeOut(300,function(){

   $(this).remove();fun

    });

}

css部分


/*弹窗*/

.alertLj{width:400px;margin:0 auto;position:absolute;overflow:hidden;display:none;}

.alertTitle{font-weight:800;border-bottom:1px solid #f3f3f3;padding:0 10px;font-size:18px;font-size:var(--f18);line-height:40px;background:#41a1de;background-color:var(--inpbg);border-radius:5px;border-bottom-left-radius:0;border-bottom-right-radius:0;color:#fff;}

.alertClose{position:absolute;right:10px;top:5px;text-decoration: underline;color:#fff;}

.alertBox{padding:15px 10px;border:1px solid #f3f3f3;border-top:0;background:#fff;text-align:center;font-size:16px;font-size:var(--f16);word-wrap:break-word;}

.alertHandle{text-align:center;border:1px solid #f3f3f3;border-top:0;padding:10px;border-radius:5px;border-top-left-radius:0;border-top-right-radius:0;background:#fff;}

.alertHandle a{display:inline-block;margin:0 5px;border:1px solid #f3f3f3;padding:0 10px;font-size:15px;font-size:var(--f15);line-height:30px;border-radius:5px;}

.alertHandle a.alertSure{background:#41a1de;background-color:var(--inpbg);color:#fff;}

.alertLj.load .alertHandle,.alertLj.load .alertTitle{display:none;}

.alertLj.load .alertBox{border:1px solid #f3f3f3;border-radius:5px;}

.alertLjBox{position:absolute;z-index:9999;left:0;top:0;width:100%;background: rgba(0, 0, 0, 0.7);}



登录查看全部

参与评论

评论留言

还没有评论留言,赶紧来抢楼吧~~

手机查看

返回顶部

给这篇文章打个标签吧~

棒极了 糟糕透顶 好文章 PHP JAVA JS 小程序 Python SEO MySql 确认