EMLOG修改系统默认的emMsg为自适应风格的方法
时间：2019-10-5 10:55 作者：博客志 分类： emlog教程
EMLOG原生的系统提示emMsg比较简单，对于喜欢动手的大神们来说显得比较素，现在就来为大家分享一个EMLOG修改系统默认的emMsg为自适应风格的方法，让系统提示看起来更加高大上。
一、操作步骤
1、打开/include/lib/function.base.php文件，大约在第858至920行找到如下代码
/**
* 显示系统信息
*
* @param string $msg 信息
* @param string $url 返回地址
* @param boolean $isAutoGo 是否自动返回 true false
*/
function emMsg($msg, $url = 'javascript:history.back(-1);', $isAutoGo = true) {
if ($msg == '404') {
header("HTTP/1.1 404 Not Found");
$msg = '抱歉，你所请求的页面不存在！';
}
echo <<<EOT
<!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" lang="zh-CN">
<head>
EOT;
if ($isAutoGo) {
echo "<meta http-equiv=\"refresh\" content=\"2;url=$url\" />";
}
echo <<<EOT
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>提示信息</title>
<style type="text/css">
<!--
body {
background-color:#F7F7F7;
font-family: Arial;
font-size: 12px;
line-height:150%;
}
.main {
background-color:#FFFFFF;
font-size: 12px;
color: #666666;
width:650px;
margin:60px auto 0px;
border-radius: 10px;
padding:30px 10px;
list-style:none;
border:#DFDFDF 1px solid;
}
.main p {
line-height: 18px;
margin: 5px 20px;
}
-->
</style>
</head>
<body>
<div class="main">
<p>$msg</p>
EOT;
if ($url != 'none') {
echo '<p><a href="' . $url . '">«点击返回</a></p>';
}
echo <<<EOT
</div>
</body>
</html>
EOT;
exit;
}
2、将上面的代码替换为如下代码，保存上传覆盖即可
/**
* 显示系统信息
*
* @param string $msg 信息
* @param string $url 返回地址
* @param boolean $isAutoGo 是否自动返回 true false
*/
function emMsg($msg, $url = 'javascript:history.back(-1);', $isAutoGo = false) {
if ($msg == '404') {
header("HTTP/1.1 404 Not Found");
$msg = '抱歉，你所请求的页面不存在！';
}
echo <<<EOT
<!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" lang="zh-CN">
<head>
EOT;
if ($isAutoGo) {
echo "<meta http-equiv=\"refresh\" content=\"2;url=$url\" />";
}
echo <<<EOT
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>提示信息</title>
<style type="text/css">
<!--
body,code,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body{font:14px/1.5 'Microsoft YaHei','微软雅黑',Helvetica,Sans-serif;background:#f0f1f3;}
:focus{outline:0}
ul,ol,dl{list-style-type:none}
h1,h2,h3,h4,h5,h6,strong{font-weight:700}
a{color:#428bca;text-decoration:none}
a:hover{text-decoration:underline}
.error-page{background:#f0f1f3;padding:80px 0 180px}
.error-page-container{position:relative;z-index:1}
.error-page-main{width:30%;position:relative;background:#f9f9f9;margin:0 auto;-ms-box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:50px 50px 70px;}
.error-page-main:before{content:'';display:block;background:url(https://ww1.sinaimg.cn/mw690/005DiYL9gw1f3zky2zq07j30h50070fn.jpg);height:7px;position:absolute;top:-7px;width:100%;left:0}
.error-page-main h3{font-size:24px;font-weight:400;border-bottom:1px solid #d0d0d0}
.error-page-main h3 strong{font-size:54px;font-weight:400;margin-right:20px}
.error-page-main h4{font-size:20px;font-weight:400;color:#333}
.error-page-actions{font-size:0;z-index:100}
.error-page-actions div{font-size:14px;display:inline-block;padding:30px 0 0 10px;-ms-box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;color:#838383}
.error-page-actions ol{list-style:decimal;padding-left:20px}
.error-page-actions li{line-height:2.5em}
.error-page-actions:before{content:'';display:block;position:absolute;z-index:-1;bottom:17px;left:50px;width:200px;height:10px;-moz-box-shadow:4px 5px 31px 11px #999;-webkit-box-shadow:4px 5px 31px 11px #999;box-shadow:4px 5px 31px 11px #999;-moz-transform:rotate(-4deg);-webkit-transform:rotate(-4deg);-ms-transform:rotate(-4deg);-o-transform:rotate(-4deg);transform:rotate(-4deg)}
.error-page-actions:after{content:'';display:block;position:absolute;z-index:-1;bottom:17px;right:50px;width:200px;height:10px;-moz-box-shadow:4px 5px 31px 11px #999;-webkit-box-shadow:4px 5px 31px 11px #999;box-shadow:4px 5px 31px 11px #999;-moz-transform:rotate(4deg);-webkit-transform:rotate(4deg);-ms-transform:rotate(4deg);-o-transform:rotate(4deg);transform:rotate(4deg)}
@media only screen and (max-width: 650px) {
.error-page-main{width:90%;position:relative;background:#f9f9f9;margin:0 auto;-ms-box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:50px 50px 70px;}
}
-->
</style>
</head>
<body>
<div class="error-page">
<div class="error-page-container">
<div class="error-page-main">
<h3>友情提示</h3>
<div class="error-page-actions">
<div>
<ol>
<li style="color:red;">$msg</li>
</ol>
</div>
EOT;
if ($url != 'none') {
echo '<div>
<ul>
<li id="div_time">请稍等，页面将在 <span id="time" style="font-weight:bold;color:red;">5</span> 秒后跳转...</li>
<li><a href="' . $url . '">立即转到</a><a style="margin-left:60px;" href="' . $url . '">点击返回</a></li>
</ul>
</div>';
}
echo <<<EOT
</div>
</div>
</div>
</div>
<script type="text/javascript">
function run(){
var s = document.getElementById("time");
if(s.innerHTML == 1){
document.getElementById("div_time").style.visibility="hidden";
return false;
}
s.innerHTML = s.innerHTML * 1 - 1;
}
window.setInterval("run();", 1000);
window.setTimeout(function (){location.href="$url";},5000);
</script>
</body>
</html>
EOT;
exit;
}
二、原理解析
对EMLOG系统原生的默认提示框进行修改，使之成为自适应，变得更加好看
三、注意事项
1、本教程中使用的图片放置在新浪微博图库，如存在防盗链的问题可以点击EMLOG解决新浪微博图库防盗链问题的方法 ，或者直接下载放置在本地