2. 程式人生 > 程式設計 >Thinkphp自定義美化success和error提示跳轉頁面程式碼例項

Thinkphp自定義美化success和error提示跳轉頁面程式碼例項

阿新 • • 發佈：2021-03-07

先貼效果圖：

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 "Microsoft Yahei","微軟雅黑",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-container input[type='button'] {
 width: 20%;
 padding: 0.357rem;
 color: #fff;
 border-radius: 3px;
 -webkit-radius: 3px;
 -moz-radius: 3px;
 background-color: #3B9DFF;
}
.btn-container input[type='button']:active {
 background-color: #1966b3;
}
/*重置盒模型 */
.boxContent * {
 box-sizing: content-box;
 -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
}
/*animation start*/
#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: alertAnimation 0.3s ease-in-out 0s 1;
 -moz-animation: alertAnimation 0.3s ease-in-out 0s 1;
 animation: alertAnimation 0.3s ease-in-out 0s 1;
}
#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: 4px solid #66cc33;
 margin: 15px auto 5px auto;
}
#animationTipBox .icon_box {
 width: 80px;
 height: 80px;
 margin: 0 auto;
 text-align: center;
 position: relative;
}
#animationTipBox .lose .icon {
 border-color: #FF9090;
}
#animationTipBox .lose .icon_box {
 -webkit-animation: lose_Animation 0.5s ease 0s 1;
 -moz-animation: lose_Animation 0.5s ease 0s 1;
 animation: lose_Animation 0.5s ease 0s 1;
}
#animationTipBox .dec_txt {
 font-size: 16px;
 text-align: center;
 color: #666;
 line-height: 26px;
 height: 26px;
 padding: 5px 0 10px 0;
}
.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_Animation 0.65s ease 0s 1;
 -moz-animation: success_short_Animation 0.65s ease 0s 1;
 animation: success_short_Animation 0.65s ease 0s 1;
}
.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_Animation 0.65s ease 0s 1;
 -moz-animation: success_long_Animation 0.65s ease 0s 1;
 animation: success_long_Animation 0.65s ease 0s 1;
}
.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);
}
/* 總體動畫 函式 */
/*all animate*/
@-webkit-keyframes alertAnimation {
 0% {
  -webkit-transform: scale(0.5);
 }
 45% {
  -webkit-transform: scale(1.25);
 }
 80% {
  -webkit-transform: scale(0.95);
 }
 100% {
  -webkit-transform: scale(1);
 }
}
@-moz-keyframes alertAnimation {
 0% {
  -webkit-transform: scale(0.5);
 }
 45% {
  -webkit-transform: scale(1.25);
 }
 80% {
  -webkit-transform: scale(0.95);
 }
 100% {
  -webkit-transform: scale(1);
 }
}
@-webkit-keyframes alertAnimation {
 0% {
  -webkit-transform: scale(0.5);
 }
 45% {
  -webkit-transform: scale(1.25);
 }
 80% {
  -webkit-transform: scale(0.95);
 }
 100% {
  -webkit-transform: scale(1);
 }
}
/*all animate*/
/*success short animate*/
@-webkit-keyframes success_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-keyframes success_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-keyframes success_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;
 }
}
/*success short animate*/
/*success long animate*/
@-webkit-keyframes success_long_Animation {
 0% {
 http://www.cppcns.com
 
 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-keyframes success_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-keyframes success_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;
 }
}
/*success long animate*/
/*load_Animation*/
@-webkit-keyframes load_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-keyframes load_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-keyframes load_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-keyframes lose_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-keyframes lose_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-keyframes lose_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: 4px solid #fff;
 margin: 15px auto 5px auto;
 top: 10px;
}
.load .icon_box {
 margin: 10px auto;
 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: rotawww.cppcns.com
 
te(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_Animation 1.2s ease 0s infinite;
 -moz-animation: cir_Animation 1.2s ease 0s infinite;
 animation: cir_Animation 1.2s ease 0s infinite;
}
.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;
}
@-wwww.cppcns.com
 
ebkit-keyframes cir_Animation {
 0%,80%,100% {
  -webkit-transform: scale(0.4);
 }
 40% {
  -webkit-transform: scale(1);
 }
}
@-moz-keyframes cir_Animation {
 0%,100% {
  -webkit-transform: scale(0.4);
 }
 40% {
  -webkit-transform: scale(1);
 }
}
@-webkit-keyframes cir_Animation {
 0%,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__}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
  <title>跳轉提示</title>
	<!--引入dialog.css樣式-->
  <link rel="stylesheet" href="__STATIC__/css/dialog.css" rel="external nofollow" >
  <style type="text/css">
		.system-message p{ text-align: center;}
		.system-message .jump{ padding-top: 10px}
		.shttp://www.cppcns.comystem-message .jump a{ color: #333;}
		.system-message .jump-btn{margin-top: 40px}
		.system-message .jump-btn a{font-size: 16px;color: #fff;border-radius: 4px;background-color: #0d65a3;padding: 6px 16px;text-decoration: none;}
	</style>
</head>
<body>
  <div class="system-message">
		<div id='animationTipBox'>
    <?php switch ($code) {?>
      <?php case 1:?>
			<!--成功-->     
				<div class='success'>
				  <div class='icon'>
					  <div class='icon_box'>
						  <div class='line_short'></div>
						  <div class='line_long'></div>
					  </div>
				  </div>
					<div class='dec_txt'><?php echo(strip_tags($msg));?></div>					
				</div>
      <?php break;?>
      <?php case 0:?程式設計客棧>
			<!--錯誤-->
				<div class='lose'>
				  <div class='icon'>
					  <div class='icon_box'>
						  <div class='line_left'></div>
						  <div class='line_right'></div>
					  </div>
				  </div>
					<div class='dec_txt'><?php echo(strip_tags($msg));?></div>					
				</div>							
      <?php break;?>
    <?php } ?>
			<p class="jump">
				頁面自動<a id="href" href="<?php echo($url);?>" rel="external nofollow" >跳轉</a> 等待時間： <b id="wait"><?php echo($wait);?>
			</p>
			<p class="jump-btn"><a id="href" href="<?php echo($url); ?>" rel="external nofollow" >點選跳轉</a></p>
		</div>		
  </div>
  <script type="text/javascript">
    (function(){
      var wait = document.getElementById('wait'),href = document.getElementById('href').href;
      var interval = setInterval(function(){
        var time = --wait.innerHTML;
        if(time <= 0) {
          location.href = href;
          clearInterval(interval);
        };
      },1000);
    })();
  </script>
</body>
</html>

注意：dialog.css的路徑要根據你自己的網站來寫

到此這篇關於Thinkphp自定義美化success和error提示跳轉頁面程式碼例項的文章就介紹到這了,更多相關Thinkphp自定義美化success和error提示跳轉頁面內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！

相關推薦

Thinkphp自定義美化success和error提示跳轉頁面程式碼例項

先貼效果圖： 優點：圖示是有動畫效果的，不需要背景圖片。  1、需要引用一個dialog.css，程式碼如下： 

微信公眾號訂閱模板 【傳送自定義模板以及模板點選跳轉新頁面】

嗯。。。已經好久沒寫部落格了，主要是今年一波三折，還好現在穩定下來。記錄下微信的一些東西吧！string.format可以簡寫成$ 有需要的同學們！！

Django搭建個人部落格：自定義模板過濾器和標籤

現在我們已經很熟悉Django的MTV模式了。模板（template）負責如何去展示資料，而檢視（view）負責篩選出正確的資料。因此通常來說邏輯都是放到檢視中的，但模板也需要一些和表示相關的邏輯：比如迴圈展示（如{% for

Spring Boot自定義配置實現IDE自動提示

一、背景 官方提供的spring boot starter的配置項，我們用IDE配置的時候一般都有自動提示的，如下圖所示

Java kafka如何實現自定義分割槽類和攔截器

生產者傳送到對應的分割槽有以下幾種方式： （1）指定了patition，則直接使用；(可以查閱對應的java api,有多種引數)

Laravel 中自定義 手機號和身份證號驗證

首先在 Providers\\AppServiceProvider.php 檔案中自定義 手機號和身份證號驗證 // AppServiceProvider.php 檔案

部落格自定義美化

部落格定製CSS程式碼 *,.Cal{padding:0}::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{width:3px;background-color:#f9f9f9}::-webkit-scrollbar-thumb{background-color:#999;background-clip:padding-

vue-quill-editor 自定義工具欄和自定義圖片上傳路徑操作

背景： 1.某些場景下vue-quill-editor預設的工具欄部分功能不希望出現，需要刪除部分功能。

Element-ui樹形控制元件el-tree自定義增刪改和區域性重新整理及懶載入操作

需求： vue-cli專案樹形控制元件：一級節點為本地節點，預設展開一級節點，增刪改後區域性重新整理資料。

【snmp】net-snmp新增自定義MIB(標量和表格)

安裝net-snmp見：【snmp】centos6.5安裝和配置snmp5.7.1 net-snmp新增自定義MIB(標量)：【snmp】net-snmp新增自定義MIB(標量)

ElmentUI表單校驗自定義——動態新增和刪除

需求： 1.表單列表：點選按鈕增加一行、刪除、校驗輸入； 2.表格列表：點選按鈕增加一行、刪除、輸入校驗。

管理企業語音——自定義使用者授權和出站路由

自定義使用者授權和出站路由主要是為不同使用者配置相應的電話撥出許可權（就比如一般使用者只能撥打本地的電話，而經理可以撥打長途）；

uni-app開發微信小程式自定義tabbar欄和根據不同角色展示不同的tabbar欄

原文連結 在網上找別人的方法,加以修改 <template> <view class=\"tarbar\"> <view class=\".tarbar-list\" :style=\"{

faces servlet_如何自定義，新增和刪除Apple Watch Faces

faces servlet The Apple Watch is very customizable and its watch face is no exception. There are multiple styles, such as Modular, Mickey Mouse, and Utility, each with options for comp

解決Laravel自定義類引入和名稱空間的問題

1.問題描述 在Laravel中引入了一個第三方驗證碼類Code.class.php，在使用的時候發現如果不給這個類設定名稱空間，那麼需要在使用時用require引入這個檔案，引入後在

Typescript自定義異常類和列舉業務狀態碼

技術標籤：TypescriptMidwayjsNodejsnode.js後端 前言 最近在Midwayjs框架上搭建服務端專案，一個請求進來，執行鏈比較長，中間一旦出現校驗不通過，需要進行異常處理，如果要在業務程式碼中進行異常處理十分麻煩

vue-quill-editor安裝及使用：自定義工具欄和自定義中文字型，把字型寫在html的style中

一、自定義工具欄把toolbar在vue的data return裡配置就可以； 二、用vue-quill-editor寫出來的郵件，發出去之後字型樣式變了，那是應該vue-quill-editor改變字型的font-family沒繫結在style上，而是通過class來改變的

SpringMVC Json自定義序列化和反序列化的操作方法

需求背景 需求一：SpringMVC構建的微服務系統，資料庫對日期的儲存是Long型別的時間戳，前端之前是預設使用Long型別時間，現在前端框架改動，要求後端響應資料時，Long型別的時間自動變成標準時間格式（yyyy-MM-dd H

qt自定義控制元件-多類別提示框

技術標籤：qt MyCustomWidgetqt自定義控制元件qt提示框滑動選擇器qt滑動選擇提示框qt多功能複選框

ROS2學習之旅（16）——建立自定義ROS2 msg和srv檔案

ROS2自定義訊息型別... 1.建立功能包 在本文中，將在自己的包中建立自定義的.msg和.srv檔案，然後在另外的包中使用它們，這兩個包應該在同一個工作空間中。