### 超漂亮DEDECMS提示框样式修改美化

管理系统（DEDECMS）中，提示框的美观程度直接影响到用户的体验，为了提升网站的友好度和视觉效果，可以通过修改提示框的样式来实现更加精美的展示效果，以下是详细的步骤和代码示例：

#### 一、修改提示框样式的基本步骤

1. **找到需要修改的文件**：打开 `include/common.func.php` 文件，找到 `ShowMsg` 函数的位置。

2. **覆盖原有代码**：使用新的 CSS 样式和 HTML 结构替换原有的提示框代码。

3. **测试效果**：保存文件并在网站上测试提示框的效果，确保修改后的样式正常显示。

#### 二、具体代码实现

“`php

function ShowMsg($msg, $gourl, $onlymsg=0, $limittime=0)

if(empty($GLOBALS[‘cfg_plus_dir’])) $GLOBALS[‘cfg_plus_dir’] = ‘..’;

$htmlhead = “rr

“;

$htmlhead .= “r

html,body,h2,div,p,img{margin:0;padding:0;liststyle:none;border:none;fontsize:12px;}

a:link,a:visited,a:active{textdecoration:none;fontfamily:Tahoma,Geneva,sansserif;}a:hover{textdecoration:underline;}

body{textalign:center;fontfamily:Tahoma,Geneva,sansserif;background:#000000;background:#0000009;paddingbottom:25px;_background:url(about:black) norepeat fixed;}

html{_background:url(about:black) norepeat fixed;}

.ts_div{width:500px;overflow:hidden;margin:0 auto;margintop:150px;border:1px solid #E9E9E9;borderradius:3px;}

.ts_div h2{textalign:left;color:#666;borderbottom:1px dotted #ccc;paddingbottom:10px;fontsize:12px;}

.ts_div p{lineheight:70px;background:url({$GLOBALS[‘cfg_plus_dir’]}/img/ts_bg.png) norepeat 0 center;margin:10px auto;fontsize:14px;textalign:left;textindent:70px;}

.ts_border{border:7px solid #efefef;}

.ts_b2{background:#fff;border:1px solid #E9E9E9;padding:10px 20px 10px 20px;}

.ts_tz{margin:10px auto;textalign:right;width:500px;color:#666;}

.ts_tz a{color:#f30;}

r“.(isset($GLOBALS[‘ucsynlogin’]) ? $GLOBALS[‘ucsynlogin’] : ”).”rrr

“;

$htmlfoot = “rrrr

“;

$litime = ($limittime==0 ? 1000 : $limittime);

if($limittime==0) $litime = 5000;

$gourl = “javascript:history.go(1);”;

if($gourl==” || $onlymsg==1)

{

$msg = “alert(“”.str_replace(“””,”“”,$msg).””);“;

}

else

{

//当网址为:close::objname 时, 关闭父框架的id=objname元素

if(preg_match(‘/close::/’,$gourl))

{

$tgobj = trim(preg_replace(‘/close::/’, ”, $gourl));

$gourl = ‘javascript:;’;

$func .= “window.parent.document.getElementById(‘{$tgobj}’).style.display=’none’;r

“;

}

$func .= ” var pgo=0;

function JumpUrl(){

if(pgo==0){ location=’$gourl’; pgo=1; }

}r

“;

$rmsg = $func;

$rmsg .= “document.write(”

织梦CMS提示

”);r

“;

$rmsg .= “document.write(”

”);r

“;

$rmsg .= “document.write(””.str_replace(“””,”“”,$msg).””);r

“;

$rmsg .= “document.write(”

”);r

“;

$rmsg .= “document.write(””;

if($onlymsg==0)

{

if( $gourl != ‘javascript:;’ && $gourl != ”)

{

$rmsg .= “

“;

$rmsg .= “”);r

“;

$rmsg .= “setTimeout(‘JumpUrl()’,$litime);”;

}

else

{

$rmsg .= “

”);r

“;

}

}

else

{

$rmsg .= “

”);r

“;

}

$msg = $htmlhead.$rmsg.$htmlfoot;

}

echo $msg;

“`

#### 三、常见问题解答（FAQs）

**Q1：如何调整提示框的宽度？

A1：要调整提示框的宽度，可以修改 CSS 样式中的 `.ts_div` 类的 `width` 属性，将 `width:500px;` 改为 `width:600px;` 即可增加提示框的宽度。

**Q2：如何改变提示框的背景颜色？

A2：要改变提示框的背景颜色，可以修改 CSS 样式中的 `.ts_b2` 类的 `background` 属性，将 `background:#fff;` 改为 `background:#f2f2f2;` 即可将背景颜色改为浅灰色。

| 修改内容 | 样式代码 | 作用 |

| :: | :: | :: |

| 提示框背景颜色 | backgroundcolor: #f0f0f0; | 设置提示框背景颜色为浅灰色 |

| 提示框边框颜色 | border: 1px solid #dcdcdc; | 设置提示框边框颜色为浅灰色 |

| 提示框边框圆角 | borderradius: 10px; | 设置提示框边框圆角为10像素 |

| 提示框字体颜色 | color: #333; | 设置提示框字体颜色为深灰色 |

| 提示框字体大小 | fontsize: 14px; | 设置提示框字体大小为14像素 |

| 提示框字体样式 | fontweight: bold; | 设置提示框字体样式为加粗 |

| 提示框内边距 | padding: 10px; | 设置提示框内边距为10像素 |

| 提示框宽度 | width: 300px; | 设置提示框宽度为300像素 |

| 提示框对齐方式 | textalign: center; | 设置提示框文本居中对齐 |

| 提示框显示位置 | position: fixed; top: 50%; left: 50%; transform: translate(50%, 50%); | 设置提示框固定在屏幕中心位置 |

“`css

.alertbox {

backgroundcolor: #f0f0f0;

border: 1px solid #dcdcdc;

borderradius: 10px;

color: #333;

fontsize: 14px;

fontweight: bold;

padding: 10px;

width: 300px;

textalign: center;

position: fixed;

top: 50%;

left: 50%;

transform: translate(50%, 50%);

}

“`