介面操作結果提示彈出框
阿新 • • 發佈：2018-12-09
總涉及兩個檔案suerwa.html和suernk.js，這兩個檔案可以放在一個html裡，如下為樣式
suerwa.html如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../css/all.css" /> <link rel="stylesheet" href="../css/icon.css" /> <link rel="stylesheet" href="../css/index.css" /> <script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script> </head> <body> <div class="pop popsu" id="success"> <div class="popicon iconsuccess"></div> <div class="popcontent popsucon"><span class="contentspan"></span>成功！</div> </div> <div class="pop poper" id="error"> <div class="popicon iconerror"></div> <div class="popcontent popercon">失敗！請重試</div> </div> <div class="pop popnotk" id="warn"> <div class="popicon iconwarn"></div> <div class="popcontent popwacon">錯誤，請重試</div> </div> <!--<button onclick="xx('12145764168761537864125458455553')">測試消失</button>--> <!--js呼叫這些彈出框--> <script type="text/javascript" src="../js/suernk.js" ></script> </body> </html>
suernk.js如下，彈出框已經隱藏了，去掉hide可顯示，此外使用時候記得呼叫jquery
//該js為獲取彈出框,設定彈出框彈出位置，提供給php所寫 //瀏覽器可視區高度 var he = $(window).height(); console.log(he); //彈出框高度 var ph = $(".pop").height(); console.log(ph); //彈出框彈出時離頂部距離 var mg = (he-ph)/2; console.log(mg); $(".pop").css("margin-top", mg); $(".pop").hide(); function success(contentspan){ $(".contentspan").html(contentspan); $("#success").show().delay(1000).hide(600); console.log("呼叫success彈出框"); } function error(contentspan){ $(".contentspan").html(contentspan); $("#error").show().delay(1000).hide(600); } function warn(contentspan){ $(".contentspan").html(contentspan); $("#warn").show().delay(1000).hide(600); } //測試所用 function xx(contentspan){ $(".contentspan").html(contentspan); $("#error").show().delay(1000).hide(600); }
之所以把函式寫成帶參的，是想在php呼叫的時候傳遞響應的資料
如下為css樣式：
/*操作提示框下圖示*/ .iconsuccess{background: url(../img/icon/success.png);} .iconerror{background: url(../img/icon/error.png);} .iconwarn{background: url(../img/icon/notknow.png);} /*彈出框樣式-suernk.html(success error notknow)*/ .pop{height: 10rem; width: 16rem; border-radius: 1rem; text-align: center; margin: auto; } .popicon{height: 2.5rem; width: 3rem; background-repeat: no-repeat; margin-left: 0.5rem; margin-top: 0.5rem;} .popcontent{/*display: inline-block;*/margin: auto; width: 90%; padding-top: 2rem; font-size: 1.2rem;} .popsu{background-color: #b1dcce8c;} .popsucon{border-top: 2px solid #02805663; color: #009966;} .poper{background-color: #ff993342;} .popercon{border-top: 2px solid #f18010; color: #e47609;} .popnotk{background-color: #ffffcc;} .popwacon{border-top: 2px solid #0000008c; color: #000000b5;} .contentspan{word-wrap: break-word; font-size: 1.2rem;}/*獲取操作內容可自動換行*/