织梦dedecms信息提示框如何快速美化？-织梦建站-盈思创科技

快速替换CSS（最简单）

这是最直接的方法，通过覆盖默认的CSS样式来美化提示框,你只需要修改一个CSS文件即可。

（图片来源网络，侵删）

操作步骤：

找到默认CSS文件 打开/dede/templets目录，找到style子目录，里面的dedecms.css文件是后台管理界面的主要样式表,提示框的样式定义在这里。
定位提示框样式 在dedecms.css文件中,搜索以下两个选择器：
- .msg：这是提示框内容区域的样式。
- .msg .tip：这是提示框顶部标题栏的样式。

修改样式代码 将原来的样式替换或修改为你喜欢的样式，下面提供一个现代化的美化示例，你可以直接复制替换掉原有的.msg和.msg .tip样式。

（图片来源网络，侵删）

/* 找到并替换掉 .msg 和 .msg .tip 的原有样式 */
/* 提示框主体样式 */
.msg {
    width: 600px; /* 调整宽度 */
    margin: 100px auto; /* 上下100px，水平居中 */
    padding: 0;
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* 阴影效果 */
    font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    background: #fff;
    overflow: hidden; /* 确保圆角生效 */
}
/* 提示框顶部标题栏样式 */
.msg .tip {
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    position: relative;
}
/* 为不同类型的提示设置不同的背景色 */
.msg .success { background-color: #4CAF50; } /* 成功：绿色 */
.msg .error { background-color: #F44336; }   /* 错误：红色 */
.msg .warning { background-color: #FF9800; } /* 警告：橙色 */
.msg .info { background-color: #2196F3; }    /* 信息：蓝色 */
/* 提示框内容区域样式 */
.msg .msg-content {
    padding: 30px 20px;
    text-align: center;
    font-size: 14px;
    color: #333;
    line-height: 1.6;
}
/* 提示框底部按钮区域样式 */
.msg .msg-button {
    text-align: center;
    padding: 15px 20px;
    background-color: #f9f9f9;
    border-top: 1px solid #eee;
}
/* 提示框按钮样式 */
.msg .msg-button a {
    display: inline-block;
    margin: 0 10px;
    padding: 8px 20px;
    background-color: #2196F3;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s;
}
.msg .msg-button a:hover {
    background-color: #0b7dda;
}

效果预览 保存文件后，任意触发一个后台提示（比如发布文章后）,你就能看到新的样式了。

使用Bootstrap美化（推荐，效果最好）

如果你的后台已经集成了Bootstrap框架，或者你愿意引入它,那么使用Bootstrap的组件可以轻松实现非常专业的提示框效果。

操作步骤：

引入Bootstrap 在你的后台模板文件中（通常是/dede/templets/index_body.htm）的<head>部分，引入Bootstrap的CSS和JS文件，推荐使用CDN,方便快捷。

（图片来源网络，侵删）

<!-- 在 <head> 标签内添加 -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

修改showmsg()函数所在的模板文件 提示框的HTML结构是由模板文件生成的，这个文件通常是/dede/templets/showmsg.htm。

替换showmsg.htm 用下面的代码完全替换showmsg.htm，这段代码使用了Bootstrap的panel和alert组件,并结合了一些自定义样式。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>提示信息</title>
    <!-- 引入Bootstrap -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* 自定义样式，确保居中和间距 */
        body {
            background-color: #f5f5f5;
        }
        .msg-wrapper {
            margin-top: 100px;
        }
        .msg-title {
            font-weight: bold;
            font-size: 18px;
        }
        .msg-button a {
            margin: 0 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row msg-wrapper">
            <div class="col-md-6 col-md-offset-3">
                <div class="panel panel-default">
                    <!-- Panel heading -->
                    <div class="panel-heading">
                        <h3 class="panel-title msg-title">
                            {dede:global.name/}
                        </h3>
                    </div>
                    <!-- Panel body -->
                    <div class="panel-body text-center">
                        <p style="font-size:16px; margin-bottom:20px;">{dede:global.message/}</p>
                        <p style="margin-bottom:20px;">
                            <small>{dede:global.time/} 自动跳转...</small>
                        </p>
                        <div class="msg-button">
                            <!-- 这里会由showmsg.php自动生成链接 -->
                            {dede:global.url/}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 自动跳转JS -->
    <script>
        var pgo = 0;
        function JumpUrl(url){
            if(pgo==0){ pgo=1; location.replace(url); }else{ return; }
        }
        setTimeout("JumpUrl('{dede:global.cfg_phpurl/}/showmsg.php?gourl={dede:global.gourl/}')", {dede:global.ma/});
    </script>
</body>
</html>

效果预览 保存后，刷新后台页面并触发提示，你会看到一个类似Bootstrap风格的、非常整洁专业的提示框。

纯原生JS美化（无需框架，灵活性高）

如果你不想引入Bootstrap，又希望有更好的交互体验（比如使用模态框Modal）,可以使用纯JavaScript来实现。

操作步骤：

创建一个新的HTML模板 在/dede/templets/目录下新建一个文件，例如showmsg_modal.htm。

编写模态框HTML和JS 将下面的代码放入showmsg_modal.htm,这个代码会创建一个全屏遮罩和一个居中的模态框。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>提示信息</title>
    <style>
        /* 基础样式 */
        body, html { height: 100%; margin: 0; font-family: "Microsoft YaHei", sans-serif; }
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }
        .modal-box {
            background: #fff;
            padding: 30px;
            border-radius: 8px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            text-align: center;
        }
        .modal-icon {
            font-size: 48px;
            margin-bottom: 15px;
        }
        .modal-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 15px;
        }
        .modal-content {
            font-size: 16px;
            color: #666;
            margin-bottom: 25px;
        }
        .modal-buttons a {
            display: inline-block;
            margin: 0 10px;
            padding: 10px 25px;
            background-color: #337ab7;
            color: #fff;
            text-decoration: none;
            border-radius: 4px;
            transition: background-color 0.3s;
        }
        .modal-buttons a:hover {
            background-color: #286090;
        }
    </style>
</head>
<body>
    <!-- 模态框结构 -->
    <div class="modal-overlay" id="msgModal">
        <div class="modal-box">
            <div class="modal-icon" id="msgIcon">✓</div>
            <div class="modal-title" id="msgTitle">{dede:global.name/}</div>
            <div class="modal-content" id="msgContent">{dede:global.message/}</div>
            <div class="modal-buttons">
                <!-- 链接由PHP生成 -->
                {dede:global.url/}
            </div>
        </div>
    </div>
    <script>
        // 根据提示类型改变图标和颜色
        const title = document.getElementById('msgTitle').innerText;
        const icon = document.getElementById('msgIcon');
        const modalBox = document.querySelector('.modal-box');
        if (title.includes('成功')) {
            icon.innerText = '✓';
            icon.style.color = '#5cb85c';
            modalBox.style.borderTop = '5px solid #5cb85c';
        } else if (title.includes('错误') || title.includes('失败')) {
            icon.innerText = '✕';
            icon.style.color = '#d9534f';
            modalBox.style.borderTop = '5px solid #d9534f';
        } else if (title.includes('警告')) {
            icon.innerText = '!';
            icon.style.color = '#f0ad4e';
            modalBox.style.borderTop = '5px solid #f0ad4e';
        } else {
            icon.innerText = 'i';
            icon.style.color = '#5bc0de';
            modalBox.style.borderTop = '5px solid #5bc0de';
        }
        // 自动跳转逻辑
        var pgo = 0;
        function JumpUrl(url){
            if(pgo==0){ pgo=1; location.replace(url); }else{ return; }
        }
        setTimeout("JumpUrl('{dede:global.cfg_phpurl/}/showmsg.php?gourl={dede:global.gourl/}')", {dede:global.ma/});
    </script>
</body>
</html>

修改PHP调用 你需要让织梦在调用提示框时，使用你新创建的模板，这需要修改一个PHP文件。打开/dede//include/helpers/showmsg.helper.php文件。在这个文件里,找到类似这样的代码：
```
$msgtype = "<div style=\"line-height:36px;\">\r\n";
// ... 其他代码 ...
$msgtype .= "</div>\r\n";
```
在文件末尾，找到生成showmsg.htm的代码,大概是这一行：
```
$tpl->Display();
```
在它之前，你可以修改模板的调用路径，如果你想使用上面创建的模态框模板,可以这样做：
```
// 在 showmsg.helper.php 文件中
// ... 前面的代码 ...
// 检查是否存在自定义的模态框模板，如果存在则使用它
if(file_exists(DEDETEMPLATE.'/showmsg_modal.htm')) {
    $tpl->LoadTemplate(DEDEROOT.'/dede/templets/showmsg_modal.htm');
}
$tpl->Display();
```
注意： 直接修改核心文件在升级时可能会被覆盖，建议在修改前备份文件，或者考虑通过二次开发的方式（如覆盖助手类）来实现。

总结与建议

方案	优点	缺点	适用场景
CSS替换	简单、快速、无需修改PHP文件	美化程度有限，样式固定	想要快速改善，对样式要求不高的用户。
Bootstrap	效果专业、响应式、组件丰富	需要引入外部框架，可能影响后台其他部分	追求最佳视觉效果，且后台已或愿意引入Bootstrap的用户。（强烈推荐）
原生JS	灵活性高、无框架依赖、可实现复杂交互	需要修改PHP文件，代码量稍多	对交互体验有特殊要求（如模态框），且不想引入额外框架的用户。

对于大多数用户来说，方案二（Bootstrap美化）是性价比最高的选择，它能在不引入太多复杂性的情况下，获得最出色的视觉效果，如果你只是想稍微改一下，方案一（CSS替换）也足够了。

织梦dedecms信息提示框如何快速美化？

快速替换CSS（最简单）

使用Bootstrap美化（推荐，效果最好）

纯原生JS美化（无需框架，灵活性高）

总结与建议

相关文章

目录[+]