问题简述：
使用mui框架默认提示框时，感觉与整体布局不符，因此想要更改其中的样式。
首先，查了一下资料：mui.toast样式风格及位置修改教程
以下是转载过来的文章内容。
=================== 我是完美的分割线 ===================
使用了mui.toast来实现可自动消失的信息提示效果。
但默认的显示效果太差了，很不显示，而且是在底部的。
如下图：
想改到屏幕的中间位置，再改大一点。
但官方并没有相关的文档教程，论坛也没找到相关的教程。
只好自己研究，最终发现。
消息框的DIV类为
<div class="mui-toast-container">
<div class="mui-toast-message">
</div>
</div>
所以，就可以通过修改CSS来改变了。
我改后的最终效果如下：
CSS代码如下：
/*toast信息提示*/
.mui-toast-container {bottom: 50% !important;}
.mui-toast-message {background: url(/app/themes/default/images/toast.png) no-repeat center 10px #000; opacity: 0.6; color: #fff; width: 180px; padding: 70px 5px 10px 5px;}
=================== 我是完美的分割线 ===================
这篇文章基本简述了问题的解决思路：
找到对应的提示框样式，然后进行重写即可。
根据上面的思路，我进行了另一番尝试。
很明显，使用mui.alert时，mui是为我们动态建立了一个DOM节点
实例效果图
实例代码段
<div class="mui-popup mui-popup-in" style="display: block;">
<div class="mui-popup-inner">
<div class="mui-popup-title">
Hello MUI
</div>
<div class="mui-popup-text">
MUI是个好框架，确认？
</div>
</div>
<div class="mui-popup-buttons">
<span class="mui-popup-button">否</span>
<span class="mui-popup-button mui-popup-button-bold">是</span>
</div>
</div>
从上面的实例我们可以看出，我们写入的内容是被直接插入到DOM树中的。
那么我们可以尝试着这样写：
// javscript
document.getElementById("confirmBtn").addEventListener('tap', function() {
var btnArray = ['否', '是'];
mui.confirm(
'<span class="muiSpan">MUI</span>是个好框架，确认？',
'Hello MUI',
btnArray,
function(e) {
if (e.index == 1) {
info.innerText = '你刚确认MUI是个好框架';
} else {
info.innerText = 'MUI没有得到你的认可，继续加油'
}
})
});
// css
.muiSpan {
color: red;
}
效果图
