Thinkphp自定义美化success和error提示跳转页面代码实例
优点:图标是有动画效果的,不需要背景图片。
1、需要引用一个dialog.css,代码如下:
/*=========================================== @des:dialog.less @author:美奇软件开发工作室 @QQ:15577969 @赞助平台:元宝支付(18pay.net) @time:2021-01-10 =============================================*/ @charset"utf-8"; .clearfix{ *zoom:1; } .clearfix:after{ visibility:hidden; display:block; font-size:0; content:""; clear:both; height:0; } *{ margin:0; padding:0; } ul, ol{ list-style:none; } img{ border:none; } input, select, textarea{ outline:none; border:none; background:none; } textarea{ resize:none; } a{ text-decoration:none; } .body{ font-family:14px"MicrosoftYahei","微软雅黑",Arial,Tahoma; } .btn-container{ width:100%; display:flex; display:-webkit-flex; display:-moz-flex; justify-content:space-around; -webkit-justify-content:space-around; -moz-justify-content:space-around; } .btn-containerinput[type='button']{ width:20%; padding:0.357rem; color:#fff; border-radius:3px; -webkit-radius:3px; -moz-radius:3px; background-color:#3B9DFF; } .btn-containerinput[type='button']:active{ background-color:#1966b3; } /*重置盒模型*/ .boxContent*{ box-sizing:content-box; -webkit-box-sizing:content-box; -moz-box-sizing:content-box; } /*animationstart*/ #animationTipBox{ width:100%; height:auto; background-color:#fff; border-radius:8px; -webkit-border-radius:8px; -moz-border-radius:8px; position:fixed; left:50%; top:30%; margin-left:-50%; margin-top:-75px; z-index:1001; -webkit-animation:alertAnimation0.3sease-in-out0s1; -moz-animation:alertAnimation0.3sease-in-out0s1; animation:alertAnimation0.3sease-in-out0s1; } #animationTipBox*{ box-sizing:content-box; -webkit-box-sizing:content-box; -moz-box-sizing:content-box; } #animationTipBox.icon{ position:relative; width:80px; height:80px; border-radius:50px; -webkit-border-radius:50px; -moz-border-radius:50px; border:4pxsolid#66cc33; margin:15pxauto5pxauto; } #animationTipBox.icon_box{ width:80px; height:80px; margin:0auto; text-align:center; position:relative; } #animationTipBox.lose.icon{ border-color:#FF9090; } #animationTipBox.lose.icon_box{ -webkit-animation:lose_Animation0.5sease0s1; -moz-animation:lose_Animation0.5sease0s1; animation:lose_Animation0.5sease0s1; } #animationTipBox.dec_txt{ font-size:16px; text-align:center; color:#666; line-height:26px; height:26px; padding:5px010px0; } .tip.icon{ width:80px; height:80px; background-color:#66cc33; border-radius:100%; -webkit-border-radius:100%; -moz-border-radius:100%; color:#fff; font-size:80px; text-align:center; line-height:80px; } .success.line_short{ width:25px; height:5px; position:absolute; left:14px; top:46px; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; background-color:#66cc33; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-animation:success_short_Animation0.65sease0s1; -moz-animation:success_short_Animation0.65sease0s1; animation:success_short_Animation0.65sease0s1; } .success.line_long{ width:47px; height:5px; position:absolute; right:8px; top:38px; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; background-color:#66cc33; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -webkit-animation:success_long_Animation0.65sease0s1; -moz-animation:success_long_Animation0.65sease0s1; animation:success_long_Animation0.65sease0s1; } .lose.line_left, .lose.line_right{ width:47px; height:5px; position:absolute; left:17px; top:37px; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; background-color:#FF9090; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); } .lose.line_right{ right:11px; top:37px; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); } /*总体动画函数*/ /*allanimate*/ @-webkit-keyframesalertAnimation{ 0%{ -webkit-transform:scale(0.5); } 45%{ -webkit-transform:scale(1.25); } 80%{ -webkit-transform:scale(0.95); } 100%{ -webkit-transform:scale(1); } } @-moz-keyframesalertAnimation{ 0%{ -webkit-transform:scale(0.5); } 45%{ -webkit-transform:scale(1.25); } 80%{ -webkit-transform:scale(0.95); } 100%{ -webkit-transform:scale(1); } } @-webkit-keyframesalertAnimation{ 0%{ -webkit-transform:scale(0.5); } 45%{ -webkit-transform:scale(1.25); } 80%{ -webkit-transform:scale(0.95); } 100%{ -webkit-transform:scale(1); } } /*allanimate*/ /*successshortanimate*/ @-webkit-keyframessuccess_short_Animation{ 0%{ width:0; left:1px; top:19px; } 54%{ width:0; left:1px; top:19px; } 70%{ width:50px; left:-4px; top:37px; } 84%{ width:17px; left:21px; top:48px; } 100%{ width:25px; left:14px; top:45px; } } @-moz-keyframessuccess_short_Animation{ 0%{ width:0; left:1px; top:19px; } 54%{ width:0; left:1px; top:19px; } 70%{ width:50px; left:-4px; top:37px; } 84%{ width:17px; left:21px; top:48px; } 100%{ width:25px; left:14px; top:45px; } } @-webkit-keyframessuccess_short_Animation{ 0%{ width:0; left:1px; top:19px; } 54%{ width:0; left:1px; top:19px; } 70%{ width:50px; left:-4px; top:37px; } 84%{ width:17px; left:21px; top:48px; } 100%{ width:25px; left:14px; top:45px; } } /*successshortanimate*/ /*successlonganimate*/ @-webkit-keyframessuccess_long_Animation{ 0%{ width:0; right:46px; top:54px; } 65%{ width:0; right:46px; top:54px; } 84%{ width:55px; right:0px; top:35px; } 100%{ width:47px; right:8px; top:38px; } } @-moz-keyframessuccess_long_Animation{ 0%{ width:0; right:46px; top:54px; } 65%{ width:0; right:46px; top:54px; } 84%{ width:55px; right:0px; top:35px; } 100%{ width:47px; right:8px; top:38px; } } @-webkit-keyframessuccess_long_Animation{ 0%{ width:0; right:46px; top:54px; } 65%{ width:0; right:46px; top:54px; } 84%{ width:55px; right:0px; top:35px; } 100%{ width:47px; right:8px; top:38px; } } /*successlonganimate*/ /*load_Animation*/ @-webkit-keyframesload_Animation{ 0%{ -webkit-transform:scale(0.6); opacity:0.2; } 50%{ -webkit-transform:scale(0.6); opacity:0.5; } 80%{ -webkit-transform:scale(1.15); opacity:0.8; } 100%{ -webkit-transform:scale(1); opacity:1.0; } } @-moz-keyframesload_Animation{ 0%{ -webkit-transform:scale(0.6); opacity:0.2; } 50%{ -webkit-transform:scale(0.6); opacity:0.5; } 80%{ -webkit-transform:scale(1.15); opacity:0.8; } 100%{ -webkit-transform:scale(1); opacity:1.0; } } @-webkit-keyframesload_Animation{ 0%{ -webkit-transform:scale(0.6); opacity:0.2; } 50%{ -webkit-transform:scale(0.6); opacity:0.5; } 80%{ -webkit-transform:scale(1.15); opacity:0.8; } 100%{ -webkit-transform:scale(1); opacity:1.0; } } /*load_Animation*/ /*lose_Animation*/ @-webkit-keyframeslose_Animation{ 0%{ -webkit-transform:scale(0.6); opacity:0.2; } 50%{ -webkit-transform:scale(0.6); opacity:0.5; } 80%{ -webkit-transform:scale(1.15); opacity:0.8; } 100%{ -webkit-transform:scale(1); opacity:1.0; } } @-moz-keyframeslose_Animation{ 0%{ -webkit-transform:scale(0.6); opacity:0.2; } 50%{ -webkit-transform:scale(0.6); opacity:0.5; } 80%{ -webkit-transform:scale(1.15); opacity:0.8; } 100%{ -webkit-transform:scale(1); opacity:1.0; } } @-webkit-keyframeslose_Animation{ 0%{ -webkit-transform:scale(0.6); opacity:0.2; } 50%{ -webkit-transform:scale(0.6); opacity:0.5; } 80%{ -webkit-transform:scale(1.15); opacity:0.8; } 100%{ -webkit-transform:scale(1); opacity:1.0; } } /*lose_Animation*/ .load{ position:relative; width:60px; height:80px; border-radius:50px; -webkit-border-radius:50px; -moz-border-radius:50px; border:4pxsolid#fff; margin:15pxauto5pxauto; top:10px; } .load.icon_box{ margin:10pxauto; width:60px; height:60px; } .load.cirBox1, .load.cirBox2, .load.cirBox3{ width:60px; height:60px; position:absolute; left:0; top:0; } .load.cirBox1>div, .load.cirBox2>div, .load.cirBox3>div{ width:10px; height:10px; border-radius:100%; -webkit-border-radius:100%; -moz-border-radius:100%; background-color:#ccc; position:absolute; } .load.cirBox1{ transform:rotate(30deg); -webkit-transform:rotate(30deg); -moz-transform:rotate(30deg); } .load.cirBox2{ transform:rotate(60deg); -webkit-transform:rotate(60deg); -moz-transform:rotate(60deg); } .load.cirBox3{ transform:rotate(90deg); -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); } .load.cir1{ left:0; top:0; } .load.cir2{ right:0; top:0; } .load.cir3{ right:0; bottom:0; } .load.cir4{ left:0; bottom:0; } .load.cir1, .load.cir2, .load.cir3, .load.cir4{ -webkit-animation:cir_Animation1.2sease0sinfinite; -moz-animation:cir_Animation1.2sease0sinfinite; animation:cir_Animation1.2sease0sinfinite; } .cirBox1.cir2{ -webkit-animation-delay:-1.1s; -moz-animation-delay:-1.1s; animation-delay:-1.1s; } .cirBox1.cir3{ -webkit-animation-delay:-0.8s; -moz-animation-delay:-0.8s; animation-delay:-0.8s; } .cirBox1.cir4{ -webkit-animation-delay:-0.5s; -moz-animation-delay:-0.5s; animation-delay:-0.5s; } .cirBox2.cir2{ -webkit-animation-delay:-1s; -moz-animation-delay:-1s; animation-delay:-1s; } .cirBox2.cir3{ -webkit-animation-delay:-0.7s; -moz-animation-delay:-0.7s; animation-delay:-0.7s; } .cirBox2.cir4{ -webkit-animation-delay:-0.4s; -moz-animation-delay:-0.4s; animation-delay:-0.4s; } .cirBox3.cir2{ -webkit-animation-delay:-0.9s; -moz-animation-delay:-0.9s; animation-delay:-0.9s; } .cirBox3.cir3{ -webkit-animation-delay:-0.6s; -moz-animation-delay:-0.6s; animation-delay:-0.6s; } .cirBox3.cir4{ -webkit-animation-delay:-0.3s; -moz-animation-delay:-0.3s; animation-delay:-0.3s; } @-webkit-keyframescir_Animation{ 0%, 80%, 100%{ -webkit-transform:scale(0.4); } 40%{ -webkit-transform:scale(1); } } @-moz-keyframescir_Animation{ 0%, 80%, 100%{ -webkit-transform:scale(0.4); } 40%{ -webkit-transform:scale(1); } } @-webkit-keyframescir_Animation{ 0%, 80%, 100%{ -webkit-transform:scale(0.4); } 40%{ -webkit-transform:scale(1); } } .mask{ width:100%; height:100%; background-color:#000; opacity:.8; position:fixed; left:0; top:0; z-index:1000; }
2、修改application/config.php里,默认跳转页面对应的模板文件
//视图输出字符串内容替换 'view_replace_str'=>['__STATIC__'=>'/static'], //默认跳转页面对应的模板文件 //'dispatch_success_tmpl'=>THINK_PATH.'tpl'.DS.'dispatch_jump.tpl', //'dispatch_error_tmpl'=>THINK_PATH.'tpl'.DS.'dispatch_jump.tpl', 'dispatch_success_tmpl'=>THINK_PATH.'tpl'.DS.'default_jump.tpl', 'dispatch_error_tmpl'=>THINK_PATH.'tpl'.DS.'default_jump.tpl',
3、在thinkphp/tpl目录下新建一个default_jump.tpl,代码如下:
{__NOLAYOUT__}跳转提示 .system-messagep{text-align:center;} .system-message.jump{padding-top:10px} .system-message.jumpa{color:#333;} .system-message.jump-btn{margin-top:40px} .system-message.jump-btna{font-size:16px;color:#fff;border-radius:4px;background-color:#0d65a3;padding:6px16px;text-decoration:none;}